﻿/* ============================================================
   Elyon Ã¢â‚¬â€ main stylesheet
   Editorial academy: maroon + forest + gold on warm ivory.
   Architectural type, structured grids, clean photo frames.
   ============================================================ */

:root {
	/* Brand — palette derived from Elyon's actual uniforms and gate:
	   • brick-red from the brick walls / gate accents
	   • warm brown from the formal Mutungo uniform (sweater, skirt, ties)
	   • forest green from the head-prefect name badges + sports shorts
	   • gold from formal tie stitching, awards
	   Cream + warm-dark neutrals tie the palette together. All critical text
	   pairs verified WCAG AAA against white. */

	/* Primary — buttons, hover states, brand fills */
	--c-primary:        #87302A;          /* brick-red — AAA-safe at every text size on cream/white (8 : 1) */
	--c-primary-hover:  #7F2C23;
	--c-primary-soft:   #FBEEEB;          /* pale rosy tint */
	--c-primary-text:   #7F2C23;          /* darker brick — use when red is small TEXT on light bg (AAA 8.5:1 on cream) */

	/* Secondary — warm brown, the school's most distinctive identity colour.
	   AAA-passing on white (9.5:1) so it's the safe choice for accent text,
	   eyebrows, link colour where AAA is needed. */
	--c-secondary:      #5D4037;          /* warm brown — Mutungo uniform */
	--c-secondary-hover:#3E2723;          /* deeper brown */
	--c-secondary-soft: #EFE8E2;          /* pale brown tint */

	/* Accent — falls back to the warm brown so anywhere the codebase
	   references --c-accent stays on-brand without introducing a third hue. */
	--c-accent:         #5D4037;          /* = brown */
	--c-accent-hover:   #3E2723;
	--c-accent-soft:    #EFE8E2;
	--c-accent-deep:    #5D4037;          /* legacy alias */
	--c-accent-bright:  #C9A24A;          /* gold — only for on-dark contexts */

	/* Gold highlight — awards, certificates, ornamental decoration only.
	   Too light for body text on white; use as background fill or icon
	   decoration with sufficient surrounding context. */
	--c-gold:           #C9A24A;
	--c-gold-soft:      #F7EFD8;

	/* Surfaces — pure white plus warm cream for soft alternating bands. */
	--c-bg:             #FFFFFF;
	--c-ivory:          #FAF6EE;          /* warm cream — matches the uniform shirt + gate panel */
	--c-surface:        #FAF6EE;          /* alt section background = warm cream */
	--c-cream:          #F5EFE6;          /* slightly deeper cream for cards */

	/* Text — warm dark instead of pure black; pairs with the brown accent
	   without feeling cold. 17:1 against white = AAA. */
	--c-text:           #1F1B17;          /* warm near-black */
	--c-text-soft:      #3E332A;          /* warm dark grey */
	--c-muted:          #4A3F37;          /* warm muted grey — AAA on white (10.4:1) and on cream (9.5:1) with comfortable margin */
	--c-border:         #E8DCD0;          /* warm cream border */
	--c-border-strong:  #C4A492;          /* warm taupe border */
	--c-rule:           #dadce0;

	/* Inverse — dark surfaces use the warm dark for consistency. */
	--c-dark-bg:        #1F1B17;
	--c-dark-surface:   #3E332A;
	--c-on-dark:        #FAF6EE;          /* warm cream text on dark surfaces */
	--c-on-dark-muted:  rgba(250, 246, 238, 0.72);
	--c-footer-bg:      #1F1B17;
	--c-footer-text:    #E8DCD0;

	--c-focus:          #87302A;          /* brick-red focus ring */

	/* One family (Inter) for body, headings, and UI. The Customizer can
	   inject a different --ff-sans / --ff-display, but the fallback chain
	   is always pure modern sans — no serif. */
	--ff-sans:    Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ff-display: var(--ff-sans);
	--ff-serif:   var(--ff-sans);
	--ff-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

	/* Modular scale (~1.25, Major Third) anchored at 16px = 1rem.
	   The clamps lift only the largest sizes as the viewport grows, so
	   body text stays calm and only headings open up on big screens. */
	--fs-2xs:     0.6875rem;                         /* 11px — eyebrows, micro labels */
	--fs-xs:      0.8125rem;                         /* 13px — meta, captions */
	--fs-sm:      0.875rem;                          /* 14px — UI labels, button-sm */
	--fs-base:    1rem;                              /* 16px — UI default, button */
	--fs-md:      1.125rem;                          /* 18px — body (comfortable for older parents, low-vision, sun-glare reading) */
	--fs-lg:      1.1875rem;                         /* 19px — lead body, h6 */
	--fs-xl:      clamp(1.375rem, 1.6vw, 1.625rem);  /* 22 → 26px — h5 */
	--fs-2xl:     clamp(1.625rem, 2.4vw, 2.125rem);  /* 26 → 34px — h4 */
	--fs-3xl:     clamp(1.875rem, 3vw, 2.625rem);    /* 30 → 42px — h3 */
	--fs-4xl:     clamp(2.25rem, 4vw, 3.5rem);       /* 36 → 56px — h2 */
	--fs-5xl:     clamp(2.75rem, 5.5vw, 4.5rem);     /* 44 → 72px — h1 */
	--fs-display: clamp(3rem, 6.5vw, 5.5rem);        /* 48 → 88px — hero */

	/* Line-heights — tighten as type grows. */
	--lh-display: 1.05;                              /* hero, h1 */
	--lh-tight:   1.15;                              /* h2, h3 */
	--lh-snug:    1.3;                               /* h4, h5, h6 */
	--lh-base:    1.65;                              /* body, prose */
	--lh-relaxed: 1.75;                              /* long-form articles */
	--lh-ui:      1;                                 /* buttons, chips, single-line UI */

	/* Letter-spacing — Inter wants tightening at display sizes,
	   neutral at body, positive only for small uppercase labels. */
	--ls-display: -0.025em;                          /* hero, h1 */
	--ls-tight:   -0.015em;                          /* h2, h3 */
	--ls-snug:    -0.005em;                          /* h4, h5 */
	--ls-normal:  0;                                 /* body, h6 */
	--ls-wide:    0.02em;                            /* button text */
	--ls-wider:   0.08em;                            /* small caps */
	--ls-widest:  0.18em;                            /* eyebrows, uppercase pills */

	/* Font-weights — Inter ships 400/500/600/700/800. */
	--fw-regular:  400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;

	/* Spacing scale */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4.5rem;
	--s-9: 6.5rem;

	/* Layout */
	--w-wide:   1240px;
	--w-narrow: 820px;
	--w-prose:  720px;
	--r-sm: 4px;
	--r-md: 6px;
	--r-lg: 10px;
	--r-pill: 999px;

	--shadow-sm: 0 1px 2px rgba(26, 22, 18, 0.06);
	--shadow-md: 0 6px 18px -8px rgba(26, 22, 18, 0.18), 0 2px 4px rgba(26, 22, 18, 0.04);
	--shadow-lg: 0 28px 60px -28px rgba(26, 22, 18, 0.32), 0 8px 16px -8px rgba(26, 22, 18, 0.08);

	--t: 220ms cubic-bezier(.2, .7, .2, 1);
	--pad-edge: clamp(1.25rem, 4vw, 2.5rem);

	/* Tell every browser the design is light-only — native form controls
	   (date pickers, scrollbars, autofill) won't get auto-tinted on
	   iOS/macOS/Windows when the OS is set to dark mode. */
	color-scheme: light;
	/* Brand-tint native checkbox / radio / range / progress on every
	   modern browser without needing per-control overrides. */
	accent-color: var(--c-primary);
}

/* ---------- Minimal reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	font-size: 100%;                  /* respect user/browser default — 1rem = 16px */
	-webkit-text-size-adjust: 100%;   /* prevent iOS auto-enlargement on rotation */
	text-size-adjust: 100%;           /* standard equivalent — Android/Edge */
	scroll-behavior: smooth;
	/* Anchor jumps land below the sticky header instead of behind it. */
	scroll-padding-top: clamp(80px, 12vh, 120px);
	/* Defensive: stop any rogue element from causing horizontal page scroll.
	   `clip` (not `hidden`) is critical — `hidden` creates a new scroll
	   container which breaks position:sticky on every descendant. */
	overflow-x: clip;
	max-width: 100%;
}
body {
	margin: 0;
	font-family: var(--ff-sans);
	font-size: var(--fs-md);
	font-weight: var(--fw-regular);
	line-height: var(--lh-base);
	letter-spacing: var(--ls-normal);
	color: var(--c-text);
	background: var(--c-ivory);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	/* Drop the harsh translucent blue flash iOS Safari paints on every
	   tap; our :hover / :focus-visible / :active styles already provide
	   the necessary feedback. */
	-webkit-tap-highlight-color: transparent;
	/* `clip` (not `hidden`) — see html rule above for why. */
	overflow-x: clip;
	max-width: 100%;
	width: 100%;
	position: relative;
}
img, picture, svg, video, iframe { max-width: 100%; height: auto; display: block; }
iframe { width: 100%; }

a {
	color: var(--c-primary-text);   /* darker brick — AAA on cream/white at 8.5:1 */
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	transition: color var(--t), text-decoration-color var(--t);
	touch-action: manipulation;     /* eliminate the 300ms double-tap-zoom delay on Android Chrome */
}
a:hover, a:focus-visible { color: var(--c-text); }
button, [role="button"], summary { touch-action: manipulation; }

.elyon-nav__list a, .elyon-btn, .elyon-link, .elyon-chip,
.elyon-album__link, .page-numbers, .elyon-footer a,
.elyon-topbar a, .elyon-brand a, .elyon-post-card__title a,
.elyon-album__title a, .elyon-program__title a, .elyon-fnav__list a,
.elyon-h-arrow, .elyon-drawer__nav a {
	text-decoration: none;
}
.elyon-nav__list a:hover, .elyon-link:hover, .elyon-footer a:hover,
.elyon-topbar a:hover, .elyon-post-card__title a:hover,
.elyon-program__title a:hover, .elyon-fnav__list a:hover,
.elyon-nav__list a:focus-visible, .elyon-link:focus-visible,
.elyon-footer a:focus-visible, .elyon-topbar a:focus-visible,
.elyon-post-card__title a:focus-visible,
.elyon-program__title a:focus-visible,
.elyon-fnav__list a:focus-visible { text-decoration: underline; }

/* Heading defaults — every level shares the family + balanced wrapping;
   each level then sets its own size, line-height, letter-spacing, weight.
   Per-section title overrides should be avoided. If a section needs a
   different size, choose a different heading level instead. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--ff-display);
	color: var(--c-text);
	margin: 0 0 var(--s-4);
	text-wrap: balance;
}
h1 { font-size: var(--fs-5xl); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-medium);   }
h2 { font-size: var(--fs-4xl); line-height: var(--lh-display); letter-spacing: var(--ls-tight);   font-weight: var(--fw-medium);   }
h3 { font-size: var(--fs-3xl); line-height: var(--lh-tight);   letter-spacing: var(--ls-tight);   font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-2xl); line-height: var(--lh-snug);    letter-spacing: var(--ls-snug);    font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-xl);  line-height: var(--lh-snug);    letter-spacing: var(--ls-snug);    font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-lg);  line-height: var(--lh-snug);    letter-spacing: var(--ls-normal);  font-weight: var(--fw-semibold); }
p { margin: 0 0 var(--s-4); text-wrap: pretty; }
ul, ol { padding-left: 1.25rem; }
button { font: inherit; cursor: pointer; }
strong, b { font-weight: var(--fw-bold); color: var(--c-text); }
hr { border: 0; border-top: 1px solid var(--c-rule); }

/* ============================================================
   WordPress block-editor compatibility — required CSS classes
   for content authored in Gutenberg (alignment, captions, sticky
   posts, post-by-author markers, gallery captions).
   ============================================================ */
.alignleft  { float: left;  margin: 0 var(--s-5) var(--s-3) 0; max-width: 50%; }
.alignright { float: right; margin: 0 0 var(--s-3) var(--s-5); max-width: 50%; }
.aligncenter { display: block; margin-inline: auto; clear: both; }
.alignwide  { max-width: var(--w-wide);  margin-inline: auto; }
.alignfull  { width: 100%; max-width: none; }

.wp-caption {
	max-width: 100%;
	margin: 0 0 var(--s-5);
}
.wp-caption img {
	display: block;
	height: auto;
	max-width: 100%;
	margin: 0 auto;
}
.wp-caption-text,
.gallery-caption {
	margin: var(--s-2) 0 0;
	padding: 0 var(--s-2);
	font-size: var(--fs-sm);
	font-style: italic;
	color: var(--c-muted);
	text-align: center;
	line-height: 1.5;
}

/* "Sticky" post marker — applied to <article> by post_class() when a
   post is marked sticky in the editor. Visual treatment: a small ribbon
   accent on the top-left corner. */
.sticky {
	position: relative;
}
.sticky::before {
	content: "★";
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--c-primary);
	color: #fff;
	font-size: 14px;
	border-radius: 0 0 var(--r-sm) 0;
	z-index: 1;
}

/* Author-of-the-post marker for comments — kept simple; barely styled. */
.bypostauthor {
	/* Selector required by Theme Check. Comments aren't heavily styled
	   on this site, but we still mark the author's own replies. */
}

:focus-visible {
	outline: 3px solid var(--c-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px,1px,1px,1px);
	width: 1px; height: 1px;
	overflow: hidden;
	white-space: nowrap;
}

.elyon-skip {
	position: absolute;
	left: 0;
	top: -100px;
	background: var(--c-primary);
	color: #fff;
	padding: var(--s-3) var(--s-4);
	z-index: 9999;
	border-radius: 0 0 var(--r-md) 0;
	font-weight: 600;
}
.elyon-skip:focus, .elyon-skip:focus-visible { top: 0; color: #fff; text-decoration: none; }

/* ---------- Buttons ---------- */
/* Buttons — single base, three sizes (default, --sm, --lg) and four
   colour variants (--primary, --accent, --outline, --ghost). All variants
   share font-family, weight, line-height, letter-spacing — only the
   colour and the size dimensions change. */
.elyon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	min-height: 48px;
	padding: 0 var(--s-6);
	border: 1.5px solid transparent;
	border-radius: var(--r-sm);
	font-family: var(--ff-sans);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-ui);
	letter-spacing: var(--ls-wide);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.elyon-btn:hover, .elyon-btn:focus-visible { text-decoration: none; transform: translateY(-1px); }
.elyon-btn:active { transform: translateY(0); }
.elyon-btn--sm { min-height: 40px; padding: 0 var(--s-5); font-size: var(--fs-sm); }
.elyon-btn--lg { min-height: 56px; padding: 0 var(--s-7); font-size: var(--fs-md); }

/* Use --c-primary-text (the darker brick) as the button bg so white text
   clears AAA at 9.2:1. Hover deepens further to a near-maroon. */
.elyon-btn--primary { background: var(--c-primary-text); color: #fff; }
.elyon-btn--primary:hover, .elyon-btn--primary:focus-visible { background: #5E2118; color: #fff; }

.elyon-btn--accent { background: var(--c-accent); color: #fff; }
.elyon-btn--accent:hover, .elyon-btn--accent:focus-visible { background: var(--c-accent-hover); color: #fff; }

.elyon-btn--outline { background: transparent; color: var(--c-primary); border-color: currentColor; }
.elyon-btn--outline:hover, .elyon-btn--outline:focus-visible { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

.elyon-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.elyon-btn--ghost:hover, .elyon-btn--ghost:focus-visible { background: #fff; color: var(--c-text); border-color: #fff; }

/* ---------- Inline arrow link ---------- */
.elyon-link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-weight: 600;
	font-size: var(--fs-sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-primary);
	padding: var(--s-2) 0;
	border-bottom: 1.5px solid transparent;
	transition: color var(--t), border-color var(--t);
}
.elyon-link:hover, .elyon-link:focus-visible {
	color: var(--c-primary-hover);
	border-color: var(--c-accent);
	text-decoration: none;
}
.elyon-link span { transition: transform var(--t); }
.elyon-link:hover span, .elyon-link:focus-visible span { transform: translateX(4px); }
.elyon-link .elyon-icon { width: 16px; height: 16px; transition: transform var(--t); }
.elyon-link:hover .elyon-icon, .elyon-link:focus-visible .elyon-icon { transform: translateX(4px); }

/* ============================================================
   HEADER
   Topbar (contact strip) + main bar (brand Ã‚Â· nav Ã‚Â· CTA Ã‚Â· toggle)
   Sticky behaviour activated when [data-elyon-header] gains
   .is-scrolled (set by menu.js).
   ============================================================ */
.elyon-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--c-ivory);
	isolation: isolate;
	transition: box-shadow var(--t), background-color var(--t);
}
/* WP admin bar offset — when logged in, slot the sticky header below
   the admin bar instead of letting it slide underneath. */
.admin-bar .elyon-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .elyon-header { top: 46px; }
}
/* (Earlier versions had a `::before` cream sentinel that extended 32px
   above the header to backstop the admin-bar zone on mobile if the URL
   bar collapsed and admin-bar paint flickered. On real servers that
   pseudo rendered as a visible cream strip below the admin bar instead
   of being hidden behind it — the defensive gain was theoretical, the
   visual side-effect was real, so it has been removed.) */
.elyon-header.is-scrolled {
	background: var(--c-ivory);
	box-shadow: 0 1px 0 var(--c-rule), 0 8px 24px -16px rgba(26, 22, 18, 0.18);
}
.elyon-header.is-scrolled .elyon-topbar { display: none; }

.elyon-topbar {
	background: var(--c-secondary);
	color: var(--c-on-dark);
	font-size: var(--fs-xs);
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.elyon-topbar a { color: var(--c-on-dark); }
.elyon-topbar a:hover, .elyon-topbar a:focus-visible { color: #fff; text-decoration: underline; }
.elyon-topbar__inner {
	max-width: var(--w-wide);
	margin-inline: auto;
	padding: var(--s-2) var(--pad-edge);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-4);
}
.elyon-topbar__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-5);
	min-width: 0;
}
.elyon-topbar__contact li {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	min-height: 32px;
}
.elyon-topbar__contact .elyon-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: var(--c-accent);
}
.elyon-topbar__campus-label {
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.elyon-topbar__campus-label::after {
	content: "\00B7";        /* middle-dot, Unicode-escaped to be encoding-proof */
	margin-inline: 0.25rem;
	color: rgba(255,255,255,0.4);
	font-weight: 400;
}
.elyon-topbar__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--s-1);
}
.elyon-topbar__social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255,255,255,0.10);
	color: #fff;
	transition: background-color var(--t), color var(--t), transform var(--t);
}
.elyon-topbar__social__link:hover,
.elyon-topbar__social__link:focus-visible {
	background: var(--c-primary);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}
.elyon-topbar__social__link .elyon-icon {
	width: 18px;
	height: 18px;
}

@media (max-width: 768px) {
	.elyon-topbar__inner { gap: var(--s-3); justify-content: center; }
	.elyon-topbar__contact { gap: var(--s-3); justify-content: center; text-align: center; }
}

/* On mobile the topbar (campus contacts, email, social) is too much info
   for the available width. Hide it Ã¢â‚¬â€ all of this is already in the
   off-canvas drawer, accessible from the hamburger toggle. */
@media (max-width: 880px) {
	/* Hide the contact rows (campus phones / email) — they're verbose for
	   mobile and live in the off-canvas drawer too. Keep the social icons
	   visible so visitors can still tap straight through to Instagram /
	   YouTube without opening the menu. */
	.elyon-topbar__contact { display: none; }
	.elyon-topbar__inner {
		justify-content: flex-end;
		padding-top: var(--s-1);
		padding-bottom: var(--s-1);
		min-height: 0;
	}
}

.elyon-header__main {
	background: inherit;
	border-bottom: 1px solid var(--c-rule);
}
.elyon-header.is-scrolled .elyon-header__main { border-bottom-color: transparent; }
.elyon-header__inner {
	max-width: var(--w-wide);
	margin-inline: auto;
	padding: clamp(8px, 1.5vw, 14px) var(--pad-edge);
	display: flex;
	align-items: center;
	gap: var(--s-4);
	min-height: 56px;
}
.elyon-brand {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-right: auto;
	min-width: 0;          /* lets the text truncate / shrink */
	flex-shrink: 1;
}
.elyon-brand .custom-logo {
	/* Header-logo sizing — ~54px on phones, up to 80px on desktop.
	   Square / circular logos still read comfortably; horizontal wordmarks
	   scale on the height axis. The crest text remains legible at this size. */
	width: auto;
	height: clamp(54px, 8vw, 80px);
	max-width: 200px;
	flex-shrink: 0;
	display: block;
}
.elyon-brand--logo-only {
	/* When the brand block is logo-only we don't need the gap meant for
	   "logo + name" pairing — the logo sits cleanly on its own. */
	gap: 0;
}
.elyon-brand__logo {
	display: inline-flex;
	align-items: center;
	border-bottom: 0;
	text-decoration: none;
}
.elyon-brand__logo:hover { text-decoration: none; }
.elyon-brand__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;          /* allow text to ellipsize on overflow */
}
.elyon-brand__name {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp(1rem, 3.2vw, 1.25rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--c-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;   /* keep name on one line; ellipsis when too long */
}
.elyon-brand__name a { color: inherit; }
.elyon-brand__tagline {
	margin: 0;
	font-family: var(--ff-serif);
	font-size: 0.75rem;
	font-style: italic;
	letter-spacing: 0.02em;
	color: var(--c-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.elyon-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--s-6);
	align-items: center;
}
.elyon-nav__list > li > a {
	color: var(--c-text);
	font-weight: 500;
	font-size: 0.9375rem;     /* 15px — comfortable readable nav, in line with Apple / Stripe / Linear */
	letter-spacing: 0.01em;
	padding: var(--s-3) 0;
	position: relative;
}
.elyon-nav__list > li > a::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	bottom: 0;
	height: 2px;
	background: var(--c-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t);
}
.elyon-nav__list > li > a:hover::after,
.elyon-nav__list > li > a:focus-visible::after,
.elyon-nav__list > li.current-menu-item > a::after,
.elyon-nav__list > li.current-menu-ancestor > a::after { transform: scaleX(1); }
.elyon-nav__list > li > a:hover,
.elyon-nav__list > li > a:focus-visible { color: var(--c-primary); text-decoration: none; }
.elyon-nav__list .current-menu-item > a,
.elyon-nav__list .current-menu-ancestor > a { color: var(--c-primary); }

.elyon-nav__list li ul {
	display: none;
	position: absolute;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	padding: var(--s-3);
	margin: 0;
	list-style: none;
	min-width: 240px;
	box-shadow: var(--shadow-md);
	z-index: 50;
}
.elyon-nav__list li { position: relative; }
.elyon-nav__list li:hover > ul,
.elyon-nav__list li:focus-within > ul { display: block; }
.elyon-nav__list li ul li { display: block; }
.elyon-nav__list li ul a {
	display: block;
	padding: var(--s-2) var(--s-3);
	font-size: var(--fs-sm);
	color: var(--c-text);
	border-radius: var(--r-sm);
}
.elyon-nav__list li ul a:hover { background: var(--c-surface); color: var(--c-primary); }

.elyon-header__cta { min-height: 44px; padding: 0 var(--s-5); font-size: var(--fs-sm); }

.elyon-menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	background: var(--c-primary);
	border: 0;
	border-radius: var(--r-sm);
	padding: 0;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color var(--t), transform var(--t);
}
.elyon-menu-toggle:hover,
.elyon-menu-toggle:focus-visible {
	background: var(--c-primary-hover);
}
.elyon-menu-toggle:active { transform: scale(0.96); }
.elyon-menu-toggle__bars,
.elyon-menu-toggle__bars::before,
.elyon-menu-toggle__bars::after {
	display: block;
	width: 20px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	position: relative;
	transition: transform var(--t), top var(--t), bottom var(--t), background-color var(--t);
}
.elyon-menu-toggle__bars::before,
.elyon-menu-toggle__bars::after {
	content: '';
	position: absolute;
	left: 0;
}
.elyon-menu-toggle__bars::before { top: -6px; }
.elyon-menu-toggle__bars::after  { top:  6px; }
.elyon-menu-toggle[aria-expanded="true"] .elyon-menu-toggle__bars { background: transparent; }
.elyon-menu-toggle[aria-expanded="true"] .elyon-menu-toggle__bars::before { top: 0; transform: rotate(45deg); }
.elyon-menu-toggle[aria-expanded="true"] .elyon-menu-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1024px) {
	.elyon-nav--desktop { display: none; }
	.elyon-menu-toggle { display: inline-flex; order: 3; }
	.elyon-header__cta { order: 2; }
}
@media (max-width: 720px) {
	.elyon-header__cta { display: none; }
	.elyon-brand__tagline { display: none; }
}
@media (max-width: 380px) {
	.elyon-brand { gap: var(--s-2); }
	.elyon-header__inner { gap: var(--s-2); padding: var(--s-3) var(--s-4); min-height: 56px; }
	.elyon-menu-toggle { width: 40px; height: 40px; }
}

/* ---------- Off-canvas drawer (mobile) ---------- */
.elyon-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(26, 22, 18, 0.55);
	backdrop-filter: blur(2px);
	z-index: 70;
	opacity: 0;
	transition: opacity var(--t);
}
.elyon-drawer-backdrop.is-open { opacity: 1; }
.elyon-drawer {
	position: fixed;
	top: 0;
	right: 0;
	height: 100dvh;
	width: min(360px, 88vw);
	background: var(--c-ivory);
	z-index: 80;
	padding: var(--s-5) var(--s-6);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform var(--t);
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
	box-shadow: -20px 0 60px -20px rgba(26, 22, 18, 0.35);
}
.elyon-drawer.is-open { transform: translateX(0); }
.elyon-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	padding-bottom: var(--s-4);
	border-bottom: 1px solid var(--c-rule);
}
.elyon-drawer__title {
	font-family: var(--ff-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--c-primary);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.elyon-drawer__close {
	width: 40px;
	height: 40px;
	border: 1px solid var(--c-border-strong);
	background: transparent;
	border-radius: var(--r-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--c-text);
}
.elyon-drawer__close:hover { background: var(--c-surface); }
.elyon-drawer__nav .elyon-nav__list,
.elyon-drawer__nav .menu {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
}
.elyon-drawer__nav ul { list-style: none; padding: 0; margin: 0; }
.elyon-drawer__nav a {
	display: block;
	padding: var(--s-3) 0;
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--c-text);
	border-bottom: 1px solid var(--c-rule);
}
.elyon-drawer__nav a:hover, .elyon-drawer__nav a:focus-visible { color: var(--c-primary); }
.elyon-drawer__nav .current-menu-item > a { color: var(--c-primary); font-weight: 600; }
.elyon-drawer__nav li ul { padding-left: var(--s-4); }
.elyon-drawer__nav li ul a { font-size: var(--fs-sm); color: var(--c-muted); }
.elyon-drawer__cta { width: 100%; }
.elyon-drawer__contact {
	margin-top: auto;
	padding-top: var(--s-5);
	border-top: 1px solid var(--c-rule);
	font-size: var(--fs-sm);
	color: var(--c-muted);
}

/* Default rows (icon + a single link, e.g. email) — flex on one line. */
.elyon-drawer__contact p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px var(--s-2);
	margin: 0 0 var(--s-4);
	line-height: 1.4;
	word-break: break-word;
}
.elyon-drawer__contact .elyon-icon {
	width: 16px;
	height: 16px;
	color: var(--c-primary-text);
	flex-shrink: 0;
}

/* Campus rows (icon + strong name + phone link) — 2-column grid so the
   campus name and phone number stack neatly even at 240px width. */
.elyon-drawer__contact p:has(strong) {
	display: grid;
	grid-template-areas:
		"icon name"
		"icon phone";
	grid-template-columns: 20px 1fr;
	column-gap: var(--s-2);
	row-gap: 1px;
	align-items: center;
}
.elyon-drawer__contact p:has(strong) .elyon-icon {
	grid-area: icon;
	align-self: center;
	margin: 0;
}
.elyon-drawer__contact p:has(strong) strong {
	grid-area: name;
	margin: 0;
	color: var(--c-text);
	font-weight: 600;
	line-height: 1.3;
}
.elyon-drawer__contact p:has(strong) a {
	grid-area: phone;
	color: var(--c-text);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	line-height: 1.3;
}
.elyon-drawer__contact p:has(strong) a:hover,
.elyon-drawer__contact p:has(strong) a:focus-visible {
	color: var(--c-primary-text);
	text-decoration: underline;
}
.elyon-drawer__social {
	list-style: none;
	margin: var(--s-4) 0 0;
	padding: 0;
	display: flex;
	gap: var(--s-3);
}
.elyon-drawer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	color: var(--c-text);
	transition: background-color var(--t), border-color var(--t), color var(--t);
}
.elyon-drawer__social a:hover,
.elyon-drawer__social a:focus-visible {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
}
.elyon-drawer__social .elyon-icon { width: 20px; height: 20px; }

body.elyon-drawer-open { overflow: hidden; }

/* ============================================================
   PAGE HERO  (inner pages)
   ============================================================ */
.elyon-page-hero {
	position: relative;
	background: linear-gradient(180deg, var(--c-surface) 0%, var(--c-ivory) 100%);
	padding: clamp(var(--s-7), 8vw, var(--s-9)) var(--pad-edge) clamp(var(--s-6), 7vw, var(--s-8));
	overflow: hidden;
	isolation: isolate;
}
.elyon-page-hero::before {
	content: "";
	position: absolute;
	left: 50%;
	top: var(--s-7);
	width: 1px;
	height: 48px;
	background: var(--c-accent);
	transform: translateX(-50%);
	z-index: 0;
}
.elyon-page-hero__inner {
	position: relative;
	z-index: 1;
	max-width: var(--w-narrow);
	margin-inline: auto;
	text-align: center;
}
.elyon-page-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	margin: var(--s-7) 0 var(--s-4);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-accent-deep);
}
.elyon-page-hero__eyebrow::before,
.elyon-page-hero__eyebrow::after {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: 0.5;
}
.elyon-page-hero__title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: var(--fs-3xl);
	font-weight: 500;
	font-variation-settings: "opsz" 144;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--c-text);
	text-wrap: balance;
}
.elyon-page-hero__kicker {
	margin: var(--s-5) auto 0;
	max-width: 640px;
	font-size: var(--fs-md);
	color: var(--c-muted);
	text-wrap: pretty;
}

/* Photo variant Ã¢â‚¬â€ full-bleed background image with dark overlay */
.elyon-page-hero--photo {
	min-height: clamp(380px, 52vh, 520px);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-dark-bg);
	padding-top: clamp(var(--s-8), 11vw, var(--s-10));
	padding-bottom: clamp(var(--s-8), 11vw, var(--s-10));
}
.elyon-page-hero--photo::before { display: none; }
.elyon-page-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.elyon-page-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.elyon-page-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(ellipse at center, rgba(26,22,18,0) 35%, rgba(26,22,18,0.45) 100%),
		linear-gradient(180deg, rgba(26,22,18,0.30) 0%, rgba(26,22,18,0.55) 55%, rgba(26,22,18,0.85) 100%);
}
.elyon-page-hero--photo .elyon-page-hero__inner {
	position: relative;
	z-index: 2;
	color: #fff;
}
.elyon-page-hero--photo .elyon-page-hero__eyebrow {
	margin-top: 0;
	margin-bottom: var(--s-5);
	color: var(--c-accent-bright);
}
.elyon-page-hero--photo .elyon-page-hero__title {
	color: #fff;
	text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.elyon-page-hero--photo .elyon-page-hero__kicker {
	color: var(--c-on-dark-muted);
}

/* ============================================================
   SECTION HEADS (shared)
   ============================================================ */
.elyon-section__head {
	max-width: var(--w-wide);
	margin: 0 auto var(--s-7);
	padding: 0 var(--pad-edge);
	text-align: center;
}
.elyon-section__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	margin: 0 0 var(--s-4);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-primary-text);
}
.elyon-section__eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: 0.5;
}
.elyon-section__title {
	margin: 0 0 var(--s-3);
	font-family: var(--ff-display);
	font-size: var(--fs-2xl);
	font-weight: 500;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.elyon-section__kicker {
	margin: 0 auto;
	max-width: 640px;
	color: var(--c-muted);
	font-size: var(--fs-md);
	text-wrap: pretty;
}

/* ============================================================
   GENERIC HOMEPAGE HERO  (.elyon-hero Ã¢â‚¬â€ used by other templates that
   call elyon_hero(); the front-page uses .elyon-h-hero in homepage.css)
   ============================================================ */
.elyon-hero {
	position: relative;
	min-height: 540px;
	display: grid;
	place-items: center;
	padding: clamp(var(--s-7), 8vw, var(--s-9)) var(--pad-edge);
	background-color: var(--c-dark-bg);
	background-size: cover;
	background-position: center;
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
.elyon-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(26,22,18,0.5), rgba(26,22,18,0.78));
	z-index: 0;
}
.elyon-hero__inner { position: relative; z-index: 1; max-width: 880px; text-align: center; }
.elyon-hero__eyebrow {
	margin: 0 0 var(--s-4);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--c-accent);
}
.elyon-hero__headline {
	margin: 0;
	font-family: var(--ff-display);
	font-size: var(--fs-3xl);
	font-weight: 500;
	line-height: 1.05;
	color: #fff;
	text-wrap: balance;
}
.elyon-hero__sub {
	margin: var(--s-5) auto 0;
	max-width: 640px;
	font-size: var(--fs-lg);
	color: var(--c-on-dark);
	text-wrap: pretty;
}
.elyon-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-4);
	margin-top: var(--s-7);
}

/* ============================================================
   INTRO  (used as a centered narrative block on some pages)
   ============================================================ */
.elyon-intro { background: var(--c-ivory); padding: clamp(var(--s-7), 8vw, var(--s-9)) var(--pad-edge); }
.elyon-intro__inner { max-width: var(--w-narrow); margin-inline: auto; text-align: center; }
.elyon-intro__heading {
	font-family: var(--ff-display);
	font-size: var(--fs-2xl);
	font-weight: 500;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.elyon-intro__body { margin: 0 0 var(--s-6); color: var(--c-muted); font-size: var(--fs-lg); }

/* ============================================================
   FEATURES
   ============================================================ */
.elyon-features { padding: var(--s-9) 0; background: var(--c-ivory); }
.elyon-features__grid {
	list-style: none;
	margin: 0 auto;
	padding: 0 var(--pad-edge);
	max-width: var(--w-wide);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: var(--s-5);
}
.elyon-feature {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	padding: var(--s-6) var(--s-5);
	text-align: center;
	transition: border-color var(--t), transform var(--t);
}
.elyon-feature:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.elyon-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--s-4);
	border-radius: 50%;
	background: var(--c-surface);
	color: var(--c-secondary);
	font-size: 1.5rem;
}
.elyon-feature__title { font-family: var(--ff-display); font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--s-3); }
.elyon-feature__body { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); }

/* ============================================================
   STATS BAR  (used by some pages Ã¢â‚¬â€ homepage hero handles its own)
   ============================================================ */
.elyon-stats {
	background: var(--c-secondary);
	color: var(--c-on-dark);
	padding: var(--s-7) var(--pad-edge);
	border-top: 4px solid var(--c-accent);
}
.elyon-stats__grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--w-wide);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--s-5);
	text-align: center;
}
.elyon-stat { display: flex; flex-direction: column; gap: var(--s-1); }
.elyon-stat__value {
	font-family: var(--ff-display);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 500;
	line-height: 1;
	color: #fff;
	letter-spacing: -0.02em;
}
.elyon-stat__label {
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--c-on-dark-muted);
	font-weight: 600;
}

/* ============================================================
   PROGRAMS  (academics, single-program Ã¢â‚¬â€ clean rectangular cards)
   ============================================================ */
.elyon-programs { background: var(--c-ivory); padding: var(--s-9) 0; }
.elyon-programs--full { background: var(--c-ivory); }
.elyon-programs__grid {
	list-style: none;
	margin: 0 auto;
	padding: 0 var(--pad-edge);
	max-width: var(--w-wide);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--s-6);
}
.elyon-program {
	display: flex;
	flex-direction: column;
	background: #fff;
	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-program:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: var(--c-border-strong);
}
.elyon-program__media {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--c-surface);
}
.elyon-program__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms ease;
}
.elyon-program:hover .elyon-program__media img { transform: scale(1.04); }
.elyon-program__eyebrow {
	margin: var(--s-5) var(--s-5) var(--s-2);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-accent-deep);
}
.elyon-program__title {
	margin: 0 var(--s-5) var(--s-3);
	font-family: var(--ff-display);
	font-size: var(--fs-xl);
	font-weight: 500;
	letter-spacing: -0.01em;
}
.elyon-program__title a { color: var(--c-text); }
.elyon-program__title a:hover { color: var(--c-primary); text-decoration: none; }
.elyon-program__body {
	margin: 0 var(--s-5) var(--s-5);
	color: var(--c-muted);
	font-size: var(--fs-sm);
	line-height: 1.6;
	flex: 1;
}
.elyon-program .elyon-link { margin: 0 var(--s-5) var(--s-5); align-self: flex-start; }

.elyon-programs__more,
.elyon-blog__more {
	display: flex;
	justify-content: center;
	margin-top: var(--s-7);
}

/* ============================================================
   BLOG LISTS  (front-page "elyon-h-blog" handled separately)
   ============================================================ */
/* Old wrapper padding rule removed — it was leaving 104px of empty white
   space between the closing CTA and the footer because the CTA sits as a
   child of <main class="elyon-blog">. Each child section manages its own
   padding now (see .elyon-blog__header, .elyon-blog__grid-wrap, .elyon-cta). */
.elyon-blog__grid, .elyon-postlist {
	list-style: none;
	margin: 0 auto;
	padding: 0 var(--pad-edge);
	max-width: var(--w-wide);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--s-6);
}
.elyon-post-card {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.elyon-post-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--c-border-strong);
}
.elyon-post-card__media {
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--c-surface);
}
.elyon-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}
.elyon-post-card:hover .elyon-post-card__media img { transform: scale(1.04); }
.elyon-post-card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.elyon-post-card__cats {
	margin: 0;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--c-secondary);
}
.elyon-post-card__cats a { color: inherit; text-decoration: none; }
.elyon-post-card__cats a:hover { text-decoration: underline; }
.elyon-post-card__date,
.elyon-post-card__meta {
	margin: 0;
	font-size: 0.75rem;
	color: var(--c-muted);
	letter-spacing: 0.04em;
}
.elyon-post-card__title {
	margin: var(--s-1) 0 var(--s-2);
	font-family: var(--ff-display);
	font-size: var(--fs-lg);
	font-weight: 500;
	line-height: 1.25;
}
.elyon-post-card__title a { color: var(--c-text); }
.elyon-post-card__title a:hover { color: var(--c-primary); }
.elyon-post-card__excerpt { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); flex: 1; }
.elyon-post-card__more { margin: auto 0 0; }
.elyon-post-card__more .elyon-link { font-size: 0.75rem; }

/* ============================================================
   CLOSING CTA
   ============================================================ */
.elyon-cta {
	background: var(--c-dark-bg);
	color: var(--c-on-dark);
	padding: clamp(var(--s-7), 8vw, var(--s-9)) var(--pad-edge);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.elyon-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 15% 30%, rgba(15, 15, 15, 0.18), transparent 45%),
		radial-gradient(circle at 85% 80%, rgba(135, 48, 42, 0.22), transparent 50%);
	z-index: -1;
}
.elyon-cta__inner {
	max-width: var(--w-narrow);
	margin-inline: auto;
	text-align: center;
	position: relative;
}
.elyon-cta__inner::before {
	content: "";
	display: block;
	width: 48px;
	height: 1px;
	margin: 0 auto var(--s-5);
	background: var(--c-accent);
}
.elyon-cta__heading {
	font-family: var(--ff-display);
	font-size: var(--fs-3xl);
	font-weight: 500;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.02em;
	color: #fff;
	text-wrap: balance;
}
.elyon-cta__body { margin: 0 0 var(--s-6); font-size: var(--fs-lg); color: var(--c-on-dark); text-wrap: pretty; }
.elyon-cta__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }

/* ============================================================
   FOOTER — modern editorial layout
   ============================================================ */
.elyon-footer {
	background: var(--c-footer-bg);
	color: var(--c-footer-text);
	padding: clamp(var(--s-6), 6vw, var(--s-8)) var(--pad-edge) var(--s-5);
	position: relative;
}
.elyon-footer a {
	color: var(--c-footer-text);
	text-decoration: none;
	transition: color var(--t);
}
.elyon-footer a:hover, .elyon-footer a:focus-visible { color: #fff; }
.elyon-footer__inner {
	max-width: var(--w-wide);
	margin-inline: auto;
}

/* Top: oversized brand block (left) + 3 columns of links (right) */
.elyon-footer__top {
	display: grid;
	grid-template-columns: 1.4fr 2fr;
	gap: clamp(var(--s-5), 5vw, var(--s-7));
	align-items: start;
}

.elyon-footer__brand-block { max-width: 360px; }
.elyon-footer__brand {
	font-family: var(--ff-display);
	font-size: clamp(2rem, 3.5vw, 2.75rem);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.05;
	margin: 0 0 var(--s-2);
	color: #fff;
}
.elyon-footer__slogan {
	font-family: var(--ff-display);
	font-style: italic;
	font-size: 1rem;
	color: var(--c-gold);
	margin: 0 0 var(--s-3);
}
.elyon-footer__about {
	font-size: 0.9375rem;
	color: rgba(232, 220, 208, 0.78);
	line-height: 1.65;
	margin: 0 0 var(--s-4);
}

/* Three info columns on the right */
.elyon-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(var(--s-4), 3vw, var(--s-6));
}
.elyon-footer__heading {
	font-family: var(--ff-sans);
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0 0 var(--s-4);
	color: var(--c-gold);
}

/* Quick-links column */
.elyon-fnav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.elyon-fnav__list a {
	font-size: 0.9375rem;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 0;
	transition: color var(--t), gap var(--t);
}
.elyon-fnav__list a:hover,
.elyon-fnav__list a:focus-visible {
	gap: 10px;
}

/* Social row — sits inside brand block */
.elyon-footer__social {
	list-style: none;
	margin: var(--s-3) 0 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	gap: var(--s-2);
	flex-wrap: wrap;
}
.elyon-footer__social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(232, 220, 208, 0.12);
	transition: background-color var(--t), border-color var(--t), transform var(--t);
}
.elyon-footer__social__link:hover,
.elyon-footer__social__link:focus-visible {
	background: var(--c-primary);
	border-color: var(--c-primary);
	transform: translateY(-1px);
}
.elyon-footer__social__link .elyon-icon { width: 18px; height: 18px; color: #fff; }

/* Visit-us column — campus list */
.elyon-footer__campuses {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
.elyon-footer__campus {
	font-size: 0.875rem;
	line-height: 1.55;
}
.elyon-footer__campus-name {
	margin: 0 0 4px;
	color: #fff;
	font-family: var(--ff-display);
	font-weight: 500;
	font-size: 1rem;
	letter-spacing: -0.005em;
}
.elyon-footer__campus-line {
	margin: 0;
	color: rgba(232, 220, 208, 0.72);
}

/* Get-in-touch column */
.elyon-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.elyon-footer__contact-link {
	font-size: 0.9375rem;
	color: var(--c-footer-text);
	word-break: break-all;
}
.elyon-footer__contact-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	transition: gap var(--t);
}
.elyon-footer__contact-cta:hover,
.elyon-footer__contact-cta:focus-visible {
	gap: 10px;
	color: var(--c-gold);
}

/* Gold rule + bottom strip */
.elyon-footer__rule {
	margin: clamp(var(--s-5), 5vw, var(--s-6)) 0 var(--s-4);
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, var(--c-gold) 50%, transparent 100%);
	opacity: 0.4;
}
.elyon-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-3);
	font-size: 0.8125rem;
	color: rgba(232, 220, 208, 0.82);   /* AAA on warm dark */
}
.elyon-footer__bottom p { margin: 0; }

/* Developer credit / extra copyright line — link inside this span gets
   the brand gold accent so it reads clearly as clickable against the
   dark footer (gold #C9A24A on #1F1B17 = 8.4:1, AAA-clean). */
.elyon-footer__legal-extra a {
	color: var(--c-gold);
	border-bottom: 1px solid transparent;
	transition: color var(--t), border-color var(--t);
}
.elyon-footer__legal-extra a:hover,
.elyon-footer__legal-extra a:focus-visible {
	color: var(--c-gold);
	border-bottom-color: var(--c-gold);
}

.elyon-footer__motto {
	font-family: var(--ff-display);
	font-style: italic;
	color: rgba(232, 220, 208, 0.75);
	letter-spacing: 0.04em;
}

/* Responsive */
@media (max-width: 900px) {
	.elyon-footer__top { grid-template-columns: 1fr; gap: var(--s-5); }
	.elyon-footer__brand-block { max-width: 100%; }
}
@media (max-width: 600px) {
	.elyon-footer__cols { grid-template-columns: 1fr; gap: var(--s-5); }
}
@media (max-width: 480px) {
	.elyon-footer__brand { font-size: 1.75rem; }
	.elyon-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
}

/* ============================================================
   PROSE & SINGLE / PAGE
   ============================================================ */
.elyon-prose {
	max-width: var(--w-prose);
	margin-inline: auto;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--c-text-soft);
}
.elyon-prose > * { margin-bottom: var(--s-5); }
.elyon-prose h2 {
	margin-top: var(--s-7);
	font-family: var(--ff-display);
	font-size: 1.625rem;
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--c-text);
}
.elyon-prose h3 {
	margin-top: var(--s-6);
	font-family: var(--ff-display);
	font-size: 1.25rem;
	font-weight: 600;
}
.elyon-prose img {
	border-radius: var(--r-md);
	margin: var(--s-6) 0;
	box-shadow: var(--shadow-sm);
}
.elyon-prose ul, .elyon-prose ol { padding-left: var(--s-5); }
.elyon-prose li { margin-bottom: var(--s-2); }
.elyon-prose blockquote {
	margin: var(--s-6) 0;
	padding: var(--s-3) var(--s-6);
	border-left: 3px solid var(--c-accent);
	font-family: var(--ff-display);
	font-size: 1.25rem;
	font-style: italic;
	color: var(--c-text);
	line-height: 1.55;
}
.elyon-prose blockquote p:last-child { margin: 0; }
.elyon-prose code, .elyon-prose pre {
	font-family: var(--ff-mono);
	background: var(--c-surface);
	border-radius: var(--r-sm);
}
.elyon-prose code { padding: 0.1em 0.4em; font-size: 0.92em; }
.elyon-prose pre { padding: var(--s-4); overflow-x: auto; border: 1px solid var(--c-border); }
.elyon-prose hr { margin: var(--s-7) 0; border-top: 1px solid var(--c-rule); }
.elyon-prose table { width: 100%; border-collapse: collapse; }
.elyon-prose th, .elyon-prose td {
	padding: var(--s-3);
	text-align: left;
	border-bottom: 1px solid var(--c-border);
}
.elyon-prose th { font-weight: 600; color: var(--c-text); background: var(--c-surface); }

.elyon-page-content { padding: clamp(var(--s-6), 7vw, var(--s-8)) var(--pad-edge); background: var(--c-bg); }
.elyon-page-content__inner { max-width: var(--w-prose); margin-inline: auto; }

.elyon-single { padding: clamp(var(--s-6), 7vw, var(--s-8)) var(--pad-edge); background: var(--c-bg); }
.elyon-single__header { max-width: var(--w-prose); margin: 0 auto var(--s-7); text-align: center; }
.elyon-single__header-inner { max-width: var(--w-prose); margin: 0 auto; }
.elyon-single__cats {
	margin: 0 0 var(--s-3);
	color: var(--c-secondary);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.elyon-single__cats a { color: inherit; }
.elyon-single__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.02em;
	line-height: 1.05;
	text-wrap: balance;
}
.elyon-single__meta {
	color: var(--c-muted);
	font-size: 0.875rem;
	margin: 0;
	display: flex;
	gap: var(--s-3);
	justify-content: center;
	flex-wrap: wrap;
}
.elyon-single__meta::before {
	content: "";
	display: block;
	width: 32px;
	height: 1px;
	background: var(--c-accent);
	margin: var(--s-3) auto;
}
.elyon-single__media { max-width: var(--w-wide); margin: 0 auto var(--s-7); }
.elyon-single__media img {
	border-radius: var(--r-md);
	width: 100%;
	max-height: 560px;
	object-fit: cover;
}
.elyon-single__body { margin: 0 auto; }
.elyon-single__footer {
	max-width: var(--w-prose);
	margin: var(--s-7) auto 0;
	padding-top: var(--s-5);
	border-top: 1px solid var(--c-rule);
}

.elyon-single__layout {
	max-width: var(--w-wide);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-7);
}
.elyon-single__main { min-width: 0; }
.elyon-single__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}
@media (min-width: 1024px) {
	.elyon-single--has-sidebar .elyon-single__layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--s-8);
	}
	.elyon-single--has-sidebar .elyon-single__sidebar {
		position: sticky;
		top: var(--s-6);
		align-self: start;
		max-height: calc(100vh - var(--s-7));
		overflow-y: auto;
	}
}

.elyon-tags {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}
.elyon-tags li, .elyon-tag {
	display: inline-block;
	padding: var(--s-1) var(--s-3);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	font-size: 0.75rem;
	color: var(--c-text);
	font-weight: 500;
}

.elyon-postnav { padding: var(--s-6) var(--pad-edge); border-top: 1px solid var(--c-rule); background: var(--c-ivory); }
.elyon-postnav__inner {
	max-width: var(--w-wide);
	margin-inline: auto;
	display: flex;
	justify-content: space-between;
	gap: var(--s-4);
	flex-wrap: wrap;
}
.elyon-postnav__prev,
.elyon-postnav__next {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	max-width: 360px;
}
.elyon-postnav__next { text-align: right; align-items: flex-end; }
.elyon-postnav a {
	font-family: var(--ff-display);
	font-size: 1.0625rem;
	color: var(--c-text);
	text-decoration: none;
}
.elyon-postnav a:hover { color: var(--c-primary); }
.elyon-postnav__prev::before,
.elyon-postnav__next::before {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-muted);
	font-family: var(--ff-sans);
}
.elyon-postnav__prev::before { content: "Ã¢â€ Â Previous"; }
.elyon-postnav__next::before { content: "Next Ã¢â€ â€™"; }

/* ============================================================
   ARCHIVE
   ============================================================ */
.elyon-archive { padding: var(--s-8) 0; background: var(--c-bg); }
.elyon-archive__inner { display: flex; flex-direction: column; gap: var(--s-7); }
.elyon-archive--with-sidebar .elyon-archive__inner {
	padding: 0 var(--pad-edge);
	max-width: var(--w-wide);
	margin-inline: auto;
}
.elyon-archive--search .elyon-archive__inner {
	padding: 0 var(--pad-edge);
	max-width: var(--w-wide);
	margin-inline: auto;
}
.elyon-archive--search .elyon-search-form--hero {
	max-width: 640px;
	margin-inline: auto;
	width: 100%;
}
.elyon-archive__layout { display: grid; grid-template-columns: 1fr; gap: var(--s-7); }
@media (min-width: 1024px) {
	.elyon-archive__layout {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--s-8);
	}
}
.elyon-archive__main { min-width: 0; }
.elyon-archive__main .elyon-postlist { padding: 0; max-width: none; }
.elyon-archive__main .pagination,
.elyon-archive__main .nav-links { padding: 0; margin-top: var(--s-7); justify-content: flex-start; }
.elyon-archive__sidebar { display: flex; flex-direction: column; gap: var(--s-5); }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination, .nav-links {
	max-width: var(--w-wide);
	margin: var(--s-7) auto 0;
	padding: 0 var(--pad-edge);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-2);
}
.page-numbers {
	display: inline-flex;
	min-width: 44px;
	height: 44px;
	padding: 0 var(--s-3);
	align-items: center;
	justify-content: center;
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-sm);
	color: var(--c-text);
	font-weight: 600;
	font-size: 0.9375rem;
	background: #fff;
}
.page-numbers.current { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.page-numbers:hover, .page-numbers:focus-visible { background: var(--c-surface); text-decoration: none; }

/* ============================================================
   FORMS
   ============================================================ */
.elyon-search-form { display: flex; gap: var(--s-2); margin-bottom: var(--s-5); flex-wrap: wrap; }
.elyon-search-form input[type=search] {
	flex: 1; min-width: 200px;
	padding: 0 var(--s-4);
	height: 48px;
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-sm);
	font: inherit;
	background: #fff;
	color: var(--c-text);
}
.elyon-search-form input[type=search]:focus-visible {
	border-color: var(--c-primary);
	outline-offset: 1px;
}
.elyon-search-form .elyon-btn { gap: var(--s-2); padding-inline: var(--s-5); }
.elyon-search-form .elyon-icon { width: 18px; height: 18px; }

/* Hero search form Ã¢â‚¬â€ used on search results page */
.elyon-search-form--hero {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	padding: var(--s-1);
	gap: 0;
	flex-wrap: nowrap;
	align-items: center;
	margin-bottom: var(--s-7);
	box-shadow: 0 1px 0 var(--c-rule), 0 12px 32px -20px rgba(26, 22, 18, 0.18);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.elyon-search-form--hero:focus-within {
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(135, 48, 42, 0.12), 0 12px 32px -20px rgba(26, 22, 18, 0.22);
}
.elyon-search-form--hero .elyon-search-form__field {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding-inline-start: var(--s-4);
	min-width: 0;
}
.elyon-search-form--hero .elyon-search-form__icon {
	display: inline-flex;
	color: var(--c-muted);
	flex: none;
}
.elyon-search-form--hero .elyon-search-form__icon .elyon-icon {
	width: 20px;
	height: 20px;
}
.elyon-search-form--hero input[type=search] {
	flex: 1;
	min-width: 0;
	width: 100%;
	height: 52px;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 1rem;
	color: var(--c-text);
	outline: none;
}
.elyon-search-form--hero input[type=search]::placeholder { color: var(--c-muted); }
.elyon-search-form--hero input[type=search]:focus-visible { outline: none; box-shadow: none; }
.elyon-search-form--hero input[type=search]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	margin-inline-end: var(--s-2);
	background: var(--c-muted);
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.5' stroke-linecap='round'/></svg>") center / contain no-repeat;
	cursor: pointer;
}
.elyon-search-form--hero .elyon-btn {
	height: 48px;
	padding-inline: var(--s-5);
	border-radius: var(--r-pill);
	flex: none;
}
@media (max-width: 520px) {
	.elyon-search-form--hero {
		flex-wrap: wrap;
		border-radius: var(--r-md);
		padding: var(--s-2);
		gap: var(--s-2);
	}
	.elyon-search-form--hero .elyon-search-form__field {
		flex-basis: 100%;
		padding: 0 var(--s-3);
		border: 1px solid var(--c-border);
		border-radius: var(--r-sm);
		background: var(--c-bg);
	}
	.elyon-search-form--hero .elyon-btn {
		flex-basis: 100%;
		border-radius: var(--r-sm);
		justify-content: center;
	}
}

.elyon-field { display: flex; flex-direction: column; gap: var(--s-2); margin: 0 0 var(--s-4); }
.elyon-field label {
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-text);
}
.elyon-field__req { color: var(--c-primary); margin-inline-start: 2px; }
.elyon-field__help { font-size: 0.8125rem; color: var(--c-muted); margin-top: var(--s-1); }
.elyon-field input,
.elyon-field textarea,
.elyon-field select {
	width: 100%;
	max-width: 100%;
	padding: var(--s-3) var(--s-4);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-sm);
	font: inherit;
	color: var(--c-text);
	background: #fff;
	min-height: 48px;
	transition: border-color var(--t), box-shadow var(--t);
}
.elyon-field input:focus-visible,
.elyon-field textarea:focus-visible,
.elyon-field select:focus-visible {
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(135, 48, 42, 0.12);
	outline: none;
}
.elyon-field input:invalid:not(:placeholder-shown),
.elyon-field textarea:invalid:not(:placeholder-shown) {
	border-color: #B71C1C;
}
.elyon-field textarea { resize: vertical; min-height: 160px; line-height: 1.5; padding: var(--s-3) var(--s-4); }
.elyon-field--submit { margin-top: var(--s-5); }
.elyon-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.elyon-alert {
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-md);
	margin-bottom: var(--s-4);
	font-size: 0.9375rem;
}
.elyon-alert--ok  { background: #E8F5E9; color: #1B5E20; border: 1px solid #A5D6A7; }
.elyon-alert--err { background: #FFEBEE; color: #B71C1C; border: 1px solid #EF9A9A; }

/* ============================================================
   LIBRARY / GALLERY / CONTACT (page-level wrappers)
   ============================================================ */
.elyon-library, .elyon-gallery, .elyon-contact { padding: clamp(var(--s-6), 7vw, var(--s-8)) var(--pad-edge); background: var(--c-bg); }

.elyon-library__filters {
	max-width: var(--w-wide);
	margin: 0 auto var(--s-6);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	align-items: center;
}
.elyon-library__filters input[type=search],
.elyon-library__filters select {
	flex: 1; min-width: 200px;
	padding: 0 var(--s-4);
	height: 48px;
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-sm);
	font: inherit;
	background: #fff;
}
.elyon-library__list {
	list-style: none;
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
.elyon-download {
	display: flex;
	gap: var(--s-5);
	align-items: center;
	padding: var(--s-5);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	background: #fff;
	flex-wrap: wrap;
	transition: border-color var(--t), transform var(--t);
}
.elyon-download:hover { border-color: var(--c-accent); transform: translateY(-1px); }
.elyon-download__main { flex: 1; min-width: 240px; }
.elyon-download__title {
	margin: 0 0 var(--s-2);
	font-family: var(--ff-display);
	font-size: 1.125rem;
	font-weight: 500;
}
.elyon-download__excerpt { margin: 0 0 var(--s-2); color: var(--c-muted); font-size: 0.9375rem; }
.elyon-download__meta {
	display: flex;
	gap: var(--s-3);
	flex-wrap: wrap;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--c-muted);
	margin: 0;
	text-transform: uppercase;
	font-weight: 600;
}

.elyon-gallery__filters {
	max-width: var(--w-wide);
	margin: 0 auto var(--s-6);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	justify-content: center;
}
.elyon-chip {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 var(--s-4);
	background: #fff;
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-pill);
	color: var(--c-text);
	font-size: 0.875rem;
	font-weight: 500;
	transition: background-color var(--t), color var(--t), border-color var(--t);
}
.elyon-chip:hover, .elyon-chip:focus-visible {
	background: var(--c-surface);
	border-color: var(--c-accent);
	text-decoration: none;
}
.elyon-chip.is-active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

.elyon-gallery__grid {
	list-style: none;
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: var(--s-4);
}
.elyon-album { display: block; }
.elyon-album__link {
	display: block;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	overflow: hidden;
	color: inherit;
	transition: transform var(--t), box-shadow var(--t);
}
.elyon-album__link:hover, .elyon-album__link:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	text-decoration: none;
	color: inherit;
}
.elyon-album__media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 600ms ease; }
.elyon-album__link:hover .elyon-album__media { transform: scale(1.04); }
.elyon-album__placeholder {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--c-surface);
}
.elyon-album__body { padding: var(--s-4); }
.elyon-album__date {
	font-size: 0.7rem;
	color: var(--c-muted);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
}
.elyon-album__title {
	margin: var(--s-1) 0 0;
	font-family: var(--ff-display);
	font-size: 1.0625rem;
	font-weight: 500;
}
.elyon-album__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	margin-top: var(--s-3);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--c-primary);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.elyon-album__cta .elyon-icon { width: 14px; height: 14px; transition: transform var(--t); }
.elyon-album__link:hover .elyon-album__cta .elyon-icon { transform: translateX(3px); }

/* ============================================================
   COMMENTS — single-post comment list + reply form
   ============================================================ */
.elyon-comments {
	max-width: var(--w-prose);
	margin: var(--s-7) auto;
	padding: 0 var(--pad-edge);
}
/* If the wrapper is empty (no comments AND no form) for any reason, collapse
   so it doesn't introduce a phantom gap above the closing CTA / footer. */
.elyon-comments:empty { display: none; margin: 0; padding: 0; }
.elyon-comments__title {
	font-family: var(--ff-display);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-tight);
	color: var(--c-text);
	margin: 0 0 var(--s-5);
	line-height: var(--lh-tight);
}
.elyon-comments__title span {
	color: var(--c-muted);
	font-style: italic;
	font-weight: 400;
}
.elyon-comments__list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--s-7);
}
.elyon-comments__list .comment {
	padding: var(--s-5) 0;
	border-bottom: 1px solid var(--c-border);
}
.elyon-comments__list .comment:last-child { border-bottom: 0; }
.elyon-comments__list .children {
	list-style: none;
	margin: var(--s-4) 0 0;
	padding: 0 0 0 var(--s-5);
	border-left: 2px solid var(--c-border);
}
.elyon-comments__list .comment-author {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-bottom: var(--s-3);
}
.elyon-comments__list .comment-author .avatar {
	border-radius: 50%;
	width: 40px;
	height: 40px;
}
.elyon-comments__list .comment-author cite {
	font-style: normal;
	font-weight: var(--fw-semibold);
	color: var(--c-text);
}
.elyon-comments__list .comment-meta {
	font-size: var(--fs-xs);
	color: var(--c-muted);
	margin-bottom: var(--s-3);
}
.elyon-comments__list .comment-meta a {
	color: var(--c-muted);
	text-decoration: none;
}
.elyon-comments__list .comment-meta a:hover { color: var(--c-primary-text); }
.elyon-comments__list .comment-content { color: var(--c-text); }
.elyon-comments__list .comment-content p { margin: 0 0 var(--s-3); }
.elyon-comments__list .reply { margin-top: var(--s-3); }
.elyon-comments__list .comment-reply-link {
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-primary-text);
	text-decoration: none;
}
.elyon-comments__list .comment-reply-link:hover { text-decoration: underline; }

.elyon-comments__closed {
	color: var(--c-muted);
	font-style: italic;
	margin: var(--s-5) 0;
	text-align: center;
}

/* Comment-form layout — built by comment_form() with a few wrapper hooks. */
.elyon-comments .comment-respond {
	margin-top: var(--s-7);
}
.elyon-comments .comment-reply-title {
	font-family: var(--ff-display);
	font-size: var(--fs-xl);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-snug);
	color: var(--c-text);
	margin: 0 0 var(--s-3);
}
.elyon-comments .logged-in-as,
.elyon-comments .comment-notes,
.elyon-comments .form-allowed-tags {
	font-size: var(--fs-sm);
	color: var(--c-muted);
	margin: 0 0 var(--s-4);
}
.elyon-comments .logged-in-as a,
.elyon-comments .comment-notes a {
	color: var(--c-primary-text);
}
.elyon-comments .comment-form-comment,
.elyon-comments .comment-form-author,
.elyon-comments .comment-form-email,
.elyon-comments .comment-form-url {
	margin: 0 0 var(--s-4);
}
.elyon-comments .comment-form label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--c-text);
	margin-bottom: 6px;
}
.elyon-comments .comment-form textarea,
.elyon-comments .comment-form input[type="text"],
.elyon-comments .comment-form input[type="email"],
.elyon-comments .comment-form input[type="url"] {
	width: 100%;
	max-width: 100%;
	padding: 12px 14px;
	font-family: var(--ff-sans);
	font-size: 1rem;                  /* 16px — prevent iOS Safari focus auto-zoom */
	line-height: 1.5;
	color: var(--c-text);
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	transition: border-color var(--t), box-shadow var(--t);
}
.elyon-comments .comment-form textarea:focus,
.elyon-comments .comment-form input:focus {
	outline: none;
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(135, 48, 42, 0.18);
}
.elyon-comments .comment-form textarea {
	min-height: 140px;
	resize: vertical;
}
.elyon-comments .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--s-2);
	font-size: var(--fs-sm);
	color: var(--c-muted);
	margin: 0 0 var(--s-4);
}
.elyon-comments .form-submit { margin: 0; }

/* ============================================================
   GALLERY 2 — flat photo mosaic with category tabs + lightbox
   Used on /gallery/ (archive-gallery_album.php).
   ============================================================ */
.elyon-gallery2 {
	padding: clamp(var(--s-5), 5vw, var(--s-8)) clamp(12px, 3vw, var(--pad-edge));
	background: var(--c-ivory);
}
.elyon-gallery2__inner {
	max-width: var(--w-wide);
	margin-inline: auto;
}

/* Tabs row — wraps to multiple rows on mobile so every tab is visible
   without scrolling. Wider screens centre and pad more generously. */
.elyon-gallery2__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	margin: 0 0 clamp(var(--s-5), 4vw, var(--s-7));
	padding: 6px;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: 28px;
	box-shadow: 0 1px 0 rgba(26, 22, 18, 0.04);
}
@media (min-width: 720px) {
	.elyon-gallery2__tabs {
		gap: var(--s-2);
		padding: var(--s-2);
		border-radius: 999px;
	}
}
.elyon-gallery2__tab {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 10px;
	background: transparent;
	border: 0;
	border-radius: 999px;
	font-family: var(--ff-sans);
	font-size: 0.75rem;
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	color: var(--c-text);
	cursor: pointer;
	transition: background-color var(--t), color var(--t);
	white-space: nowrap;
}
@media (min-width: 480px) {
	.elyon-gallery2__tab {
		padding: 8px 12px;
		font-size: 0.8125rem;
		gap: 6px;
	}
}
@media (min-width: 720px) {
	.elyon-gallery2__tab {
		padding: 10px var(--s-5);
		font-size: var(--fs-sm);
	}
}
/* On very narrow phones (≤340px) drop the count bubble so chips stay short */
@media (max-width: 340px) {
	.elyon-gallery2__tab-count { display: none; }
	.elyon-gallery2__tab { padding: 7px 9px; }
}
.elyon-gallery2__tab:hover { background: var(--c-cream); }
.elyon-gallery2__tab.is-active {
	background: var(--c-primary);
	color: #fff;
}
.elyon-gallery2__tab.is-active:hover { background: var(--c-primary-hover); }
.elyon-gallery2__tab-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 8px;
	background: rgba(26, 22, 18, 0.08);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: var(--fw-bold);
	font-variant-numeric: tabular-nums;
	color: var(--c-muted);
}
.elyon-gallery2__tab.is-active .elyon-gallery2__tab-count {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

/* Bento mosaic — fixed cell grid with deterministic spans so the layout
   has visual rhythm (big / wide / tall / small) regardless of photo
   aspect ratios. `dense` packs holes left by wider cells.

   Breakpoints (all common device widths covered, 240px → 1920px+):
     ≤479px  — 1 col,  220px rows, no spans (phones)
     480-767 — 2 cols, 180px rows, no spans (small/large phones, mini tablet)
     768-1023— 3 cols, 200px rows, light spans (tablet portrait, small laptop)
     1024-1279—3 cols, 220px rows, light spans (tablet landscape, laptop)
     1280-1599—4 cols, 230px rows, full spans (desktop)
     ≥1600  — 4 cols, 250px rows, full spans (wide desktop) */
.elyon-gallery2__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: 220px;
	grid-auto-flow: dense;
	gap: 8px;
}
@media (min-width: 380px) {
	.elyon-gallery2__grid { grid-auto-rows: 240px; gap: 10px; }
}
@media (min-width: 480px) {
	.elyon-gallery2__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 180px;
		gap: 10px;
	}
}
@media (min-width: 768px) {
	.elyon-gallery2__grid {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: 200px;
		gap: 12px;
	}
	/* Light spans for the 3-col mid range — every 7th is a 2×2 "hero",
	   every 13th is a tall card. Just enough rhythm for tablets. */
	.elyon-gallery2__item:nth-child(7n + 1)  { grid-column: span 2; grid-row: span 2; }
	.elyon-gallery2__item:nth-child(13n + 6) { grid-row:    span 2; }
}
@media (min-width: 1024px) {
	.elyon-gallery2__grid { grid-auto-rows: 220px; gap: var(--s-3); }
	/* Add a wide card on desktops with 3 cols — extra rhythm before the 4-col layout kicks in. */
	.elyon-gallery2__item:nth-child(11n + 4) { grid-column: span 2; }
}
@media (min-width: 1280px) {
	.elyon-gallery2__grid {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 230px;
	}
	/* Reset the 3-col spans (their nth-child indices would clash on 4-col). */
	.elyon-gallery2__item:nth-child(7n + 1),
	.elyon-gallery2__item:nth-child(11n + 4),
	.elyon-gallery2__item:nth-child(13n + 6) { grid-column: span 1; grid-row: span 1; }
	/* 4-col Bento — hero + wide + tall pattern. */
	.elyon-gallery2__item:nth-child(9n + 1)  { grid-column: span 2; grid-row: span 2; }
	.elyon-gallery2__item:nth-child(9n + 5)  { grid-column: span 2; grid-row: span 1; }
	.elyon-gallery2__item:nth-child(9n + 7)  { grid-column: span 1; grid-row: span 2; }
}
@media (min-width: 1600px) {
	.elyon-gallery2__grid { grid-auto-rows: 250px; }
}

.elyon-gallery2__item {
	margin: 0;
	min-width: 0;
	min-height: 0;
	opacity: 0;
	transform: translateY(8px);
	animation: elyon-gallery2-in 420ms cubic-bezier(.2, .7, .2, 1) forwards;
	animation-delay: calc(var(--i, 0) * 18ms);
}
.elyon-gallery2.is-animating .elyon-gallery2__item {
	animation: elyon-gallery2-in 360ms cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes elyon-gallery2-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0);   }
}

.elyon-gallery2__photo {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background: var(--c-cream);
	border: 0;
	border-radius: var(--r-md);
	overflow: hidden;
	cursor: zoom-in;
	transition: transform 250ms cubic-bezier(.2, .7, .2, 1), box-shadow var(--t);
}
.elyon-gallery2__photo:focus-visible {
	outline: 3px solid var(--c-focus);
	outline-offset: 3px;
}
.elyon-gallery2__photo:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -20px rgba(26, 22, 18, 0.28); }
.elyon-gallery2__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(.4, 0, .2, 1);
}
.elyon-gallery2__photo:hover img { transform: scale(1.03); }

.elyon-gallery2__empty {
	margin: var(--s-6) 0 0;
	padding: var(--s-6);
	background: #fff;
	border: 1px dashed var(--c-border);
	border-radius: var(--r-md);
	text-align: center;
	color: var(--c-muted);
}

/* ─── Lightbox ───────────────────────────────────────────────── */
html.elyon-lightbox-open { overflow: hidden; }
.elyon-lightbox2 {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(8px, 3vw, var(--s-6));
	background: rgba(15, 12, 10, 0.94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.elyon-lightbox2[hidden] { display: none; }
.elyon-lightbox2__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-4);
	max-width: min(1100px, 96vw);
	max-height: 90vh;
	width: 100%;
}
.elyon-lightbox2__img {
	display: block;
	max-width: 100%;
	max-height: 82vh;
	width: auto;
	height: auto;
	border-radius: var(--r-md);
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
	background: #1a1a1a;
}
@media (max-width: 480px) {
	.elyon-lightbox2__figure { max-height: 86vh; }
	.elyon-lightbox2__img    { max-height: 78vh; }
}
.elyon-lightbox2__close,
.elyon-lightbox2__nav {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--t), border-color var(--t);
}
.elyon-lightbox2__close:hover,
.elyon-lightbox2__nav:hover {
	background: rgba(0, 0, 0, 0.7);
	border-color: rgba(255, 255, 255, 0.55);
}
.elyon-lightbox2__close:focus-visible,
.elyon-lightbox2__nav:focus-visible {
	outline: 3px solid var(--c-focus);
	outline-offset: 3px;
}
.elyon-lightbox2__close { top: clamp(8px, 2.5vw, var(--s-5)); right: clamp(8px, 2.5vw, var(--s-5)); }
.elyon-lightbox2__nav--prev { left:  clamp(8px, 2.5vw, var(--s-6)); top: 50%; transform: translateY(-50%); }
.elyon-lightbox2__nav--next { right: clamp(8px, 2.5vw, var(--s-6)); top: 50%; transform: translateY(-50%); }

@media (max-width: 600px) {
	.elyon-lightbox2__close,
	.elyon-lightbox2__nav { width: 40px; height: 40px; }
}
@media (max-width: 380px) {
	.elyon-lightbox2__close,
	.elyon-lightbox2__nav { width: 36px; height: 36px; }
}

/* Campus listing on contact page */
.elyon-contact__campuses {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5);
}
.elyon-campus-card {
	padding: var(--s-6);
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	border-top: 3px solid var(--c-accent);
}
.elyon-campus-card__name {
	margin: 0 0 var(--s-3);
	font-family: var(--ff-display);
	font-size: 1.375rem;
	font-weight: 500;
	color: var(--c-primary);
	letter-spacing: -0.01em;
}
.elyon-campus-card__address { font-style: normal; line-height: 1.7; }
.elyon-campus-card__hours { font-size: 0.875rem; margin: var(--s-3) 0; color: var(--c-muted); }
.elyon-campus-card__map {
	aspect-ratio: 16 / 10;
	margin-top: var(--s-4);
	border-radius: var(--r-sm);
	overflow: hidden;
}
.elyon-contact__form {
	padding: var(--s-6);
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
}
.elyon-contact__form-title {
	margin: 0 0 var(--s-2);
	font-family: var(--ff-display);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* Single campus */
.elyon-campus { padding: clamp(var(--s-6), 7vw, var(--s-8)) var(--pad-edge); background: var(--c-bg); }
.elyon-campus__inner {
	max-width: var(--w-wide);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: var(--s-7);
}
.elyon-campus__address { font-style: normal; line-height: 1.7; margin-bottom: var(--s-4); }
.elyon-campus__hours { color: var(--c-muted); font-size: 0.9375rem; }
.elyon-campus__map { aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.elyon-campus__map iframe { width: 100%; height: 100%; }

/* Single staff */
.elyon-staff { padding: clamp(var(--s-6), 7vw, var(--s-8)) var(--pad-edge); background: var(--c-bg); }
.elyon-staff__inner {
	max-width: var(--w-wide);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(220px, 360px) 1fr;
	gap: var(--s-7);
	align-items: start;
}
.elyon-staff__photo { margin: 0; position: relative; }
.elyon-staff__photo img { border-radius: var(--r-md); width: 100%; }
.elyon-staff__photo::after {
	content: "";
	position: absolute;
	left: -8px;
	top: 24px;
	width: 24px;
	height: calc(100% - 48px);
	background: var(--c-accent);
	z-index: -1;
}
@media (max-width: 768px) {
	.elyon-staff__inner { grid-template-columns: 1fr; }
	.elyon-staff__photo::after { display: none; }
}
.elyon-staff__bio { font-size: 1.0625rem; line-height: 1.7; }

/* Single album */
.elyon-album-single { padding: clamp(var(--s-6), 7vw, var(--s-8)) var(--pad-edge); background: var(--c-bg); }
.elyon-album-single__inner { max-width: var(--w-prose); margin-inline: auto; }
.elyon-album-single__video { margin-top: var(--s-6); }
.elyon-album-single__video iframe { aspect-ratio: 16 / 9; width: 100%; border-radius: var(--r-md); }

/* Single download */
.elyon-download-single { padding: clamp(var(--s-6), 7vw, var(--s-8)) var(--pad-edge); background: var(--c-bg); }
.elyon-download-single__inner { max-width: var(--w-prose); margin-inline: auto; }
.elyon-download-single__cta { margin-top: var(--s-5); }

/* ============================================================
   404
   ============================================================ */
.elyon-404 {
	padding: clamp(var(--s-7), 8vw, var(--s-9)) var(--pad-edge);
	background: var(--c-ivory);
	text-align: center;
}
.elyon-404__inner { max-width: var(--w-narrow); margin-inline: auto; }
.elyon-404__inner h1 {
	font-family: var(--ff-display);
	font-size: var(--fs-4xl);
	font-weight: 500;
	margin-bottom: var(--s-3);
	letter-spacing: -0.02em;
}
.elyon-404__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-3);
	margin: var(--s-6) 0;
}
.elyon-404__search { margin-top: var(--s-6); max-width: 480px; margin-inline: auto; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.elyon-empty {
	max-width: var(--w-narrow);
	margin: 0 auto;
	padding: var(--s-7) var(--pad-edge);
	text-align: center;
	color: var(--c-muted);
	font-style: italic;
	font-family: var(--ff-serif);
}

/* ============================================================
   COMMENTS (default WP markup)
   ============================================================ */
.comments-area {
	max-width: var(--w-prose);
	margin: var(--s-8) auto 0;
	padding: 0 var(--pad-edge);
}
.comments-area .comments-title,
.comments-area .comment-reply-title {
	font-family: var(--ff-display);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	margin-bottom: var(--s-5);
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--c-rule);
}
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list .comment, .comment-list .pingback {
	border-top: 1px solid var(--c-rule);
	padding: var(--s-5) 0;
}
.comment-list .comment:first-child { border-top: 0; padding-top: 0; }
.comment-meta { margin-bottom: var(--s-3); font-size: 0.875rem; color: var(--c-muted); }
.comment-author { font-weight: 600; color: var(--c-text); }
.comment-respond textarea,
.comment-respond input[type=text],
.comment-respond input[type=email],
.comment-respond input[type=url] {
	width: 100%;
	padding: var(--s-3);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-sm);
	font: inherit;
	min-height: 48px;
	background: #fff;
}
.comment-respond textarea { min-height: 140px; }
.comment-form-cookies-consent {
	display: flex;
	gap: var(--s-2);
	align-items: center;
	font-size: 0.875rem;
	color: var(--c-muted);
}

/* ============================================================
   ICONS
   ============================================================ */
.elyon-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
	stroke-width: 1.75;
}

/* ============================================================
   ADMISSIONS PAGE
   ============================================================ */
.elyon-adm-hero {
	background:
		radial-gradient(circle at 20% 0%, rgba(15, 15, 15, 0.10), transparent 50%),
		linear-gradient(180deg, var(--c-surface) 0%, var(--c-ivory) 100%);
	padding: clamp(var(--s-7), 8vw, var(--s-9)) var(--pad-edge) clamp(var(--s-6), 7vw, var(--s-8));
	border-bottom: 1px solid var(--c-rule);
	position: relative;
}
.elyon-adm-hero__inner {
	max-width: 880px;
	margin-inline: auto;
	text-align: center;
}
.elyon-adm-hero__status {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	margin: 0 0 var(--s-5);
	padding: var(--s-2) var(--s-4);
	background: #fff;
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-pill);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--c-text);
	box-shadow: var(--shadow-sm);
}
.elyon-adm-hero__status-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2E7D32;
	box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.18);
	animation: elyon-pulse 2.4s ease-in-out infinite;
}
@keyframes elyon-pulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.18); }
	50%      { box-shadow: 0 0 0 6px rgba(46, 125, 50, 0.28); }
}
.elyon-adm-hero__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-adm-hero__lede {
	margin: 0 auto var(--s-6);
	max-width: 640px;
	font-size: var(--fs-lg);
	color: var(--c-muted);
	text-wrap: pretty;
}
.elyon-adm-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-3);
	margin-bottom: var(--s-7);
}
.elyon-adm-hero__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--s-5);
	max-width: 640px;
	margin: 0 auto;
	padding: var(--s-5) 0 0;
	border-top: 1px solid var(--c-rule);
}
.elyon-adm-hero__stats > div { text-align: center; }
.elyon-adm-hero__stats dt {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-muted);
	margin: 0 0 var(--s-2);
}
.elyon-adm-hero__stats dd {
	margin: 0;
	font-family: var(--ff-display);
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--c-text);
	letter-spacing: -0.01em;
}

/* ---- 3-step process ---- */
.elyon-adm-steps { padding: var(--s-9) var(--pad-edge); background: var(--c-bg); }
.elyon-adm-steps__inner { max-width: var(--w-wide); margin-inline: auto; }
.elyon-adm-steps__head { text-align: center; max-width: 720px; margin: 0 auto var(--s-7); }
.elyon-adm-steps__title {
	font-family: var(--ff-display);
	font-size: var(--fs-2xl);
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0 0 var(--s-3);
	text-wrap: balance;
}
.elyon-adm-steps__lede { color: var(--c-muted); margin: 0; }
.elyon-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: var(--s-5);
	counter-reset: step;
}
.elyon-step {
	position: relative;
	padding: var(--s-7) var(--s-6) var(--s-6);
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.elyon-step:hover, .elyon-step:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--c-accent);
}
.elyon-step__num {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	margin: 0 0 var(--s-4);
	font-family: var(--ff-display);
	font-size: 2.25rem;
	font-weight: 500;
	color: var(--c-primary);
	letter-spacing: -0.02em;
	line-height: 1;
}
.elyon-step__num::before {
	content: "Step";
	display: inline-block;
	font-family: var(--ff-sans);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--c-muted);
	margin-right: var(--s-2);
	transform: translateY(-6px);
}
.elyon-step__icon {
	display: block;
	color: var(--c-secondary);
	margin: 0 0 var(--s-3);
}
.elyon-step__icon .elyon-icon { width: 28px; height: 28px; }
.elyon-step__title {
	font-family: var(--ff-display);
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 var(--s-3);
	color: var(--c-text);
}
.elyon-step__body { margin: 0; color: var(--c-muted); font-size: 0.9375rem; line-height: 1.6; }

/* ---- Fees section + tabs ---- */
.elyon-adm-fees {
	padding: clamp(var(--s-7), 8vw, var(--s-9)) var(--pad-edge);
	background: var(--c-surface);
	scroll-margin-top: var(--s-7);
}
.elyon-adm-fees__inner { max-width: var(--w-wide); margin-inline: auto; }
.elyon-adm-fees__head { text-align: center; max-width: 720px; margin: 0 auto var(--s-7); }
.elyon-adm-fees__title {
	font-family: var(--ff-display);
	font-size: var(--fs-2xl);
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0 0 var(--s-3);
	text-wrap: balance;
}
.elyon-adm-fees__lede { color: var(--c-muted); margin: 0 0 var(--s-5); }
.elyon-adm-fees__download { margin: 0; }

.elyon-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px;
	margin: 0 auto var(--s-6);
	max-width: max-content;
	background: #fff;
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-pill);
	box-shadow: var(--shadow-sm);
}
.elyon-tabs__tab {
	min-height: 40px;
	padding: 0 var(--s-5);
	background: transparent;
	border: 0;
	border-radius: var(--r-pill);
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--c-text);
	cursor: pointer;
	transition: background-color var(--t), color var(--t);
}
.elyon-tabs__tab:hover { background: var(--c-surface); }
.elyon-tabs__tab[aria-selected="true"] { background: var(--c-primary); color: #fff; }
.elyon-tabs__tab:focus-visible { outline-offset: 4px; }
.elyon-tabs__panel:focus-visible { outline-offset: 8px; border-radius: var(--r-md); }
.elyon-tabs__panel[hidden] { display: none; }

.elyon-fee-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--s-5);
}
.elyon-fee-card {
	display: flex;
	flex-direction: column;
	padding: var(--s-6);
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-sm);
	position: relative;
	overflow: hidden;
	transition: transform var(--t), box-shadow var(--t);
}
.elyon-fee-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.elyon-fee-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--c-accent);
}
.elyon-fee-card__head { margin-bottom: var(--s-4); padding-top: var(--s-2); }
.elyon-fee-card__eyebrow {
	margin: 0 0 var(--s-2);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--c-secondary);
}
.elyon-fee-card__title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--c-primary);
}
.elyon-fee-card__amount-label {
	margin: 0 0 var(--s-1);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-muted);
}
.elyon-fee-card__amount {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp(1.875rem, 3vw, 2.5rem);
	font-weight: 500;
	color: var(--c-text);
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.elyon-fee-card__amount-divider { color: var(--c-rule); font-weight: 400; padding: 0 var(--s-2); }
.elyon-fee-card__amount-note {
	margin: var(--s-2) 0 var(--s-5);
	font-size: 0.8125rem;
	color: var(--c-muted);
	font-style: italic;
	font-family: var(--ff-serif);
}
.elyon-fee-card__includes {
	list-style: none;
	margin: 0 0 var(--s-5);
	padding: var(--s-4) 0;
	border-top: 1px solid var(--c-rule);
	border-bottom: 1px solid var(--c-rule);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
.elyon-fee-card__includes li {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	font-size: 0.9375rem;
	color: var(--c-text);
}
.elyon-fee-card__includes .elyon-icon {
	width: 18px;
	height: 18px;
	color: var(--c-secondary);
	margin-top: 3px;
}
.elyon-fee-card__details { margin-top: auto; padding-top: var(--s-2); }
.elyon-fee-card__details summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--c-primary);
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2) 0;
	min-height: 32px;
}
.elyon-fee-card__details summary::-webkit-details-marker { display: none; }
.elyon-fee-card__details summary::after {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: 1px solid var(--c-border-strong);
	border-radius: 50%;
	font-size: 14px;
	line-height: 1;
	transition: transform var(--t);
}
.elyon-fee-card__details[open] summary::after { content: "Ã¢Ë†â€™"; transform: rotate(180deg); }
.elyon-fee-card__details summary:focus-visible { outline-offset: 4px; border-radius: 4px; }
.elyon-fee-card__table-wrap { margin-top: var(--s-3); overflow-x: auto; }
.elyon-fee-card__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}
.elyon-fee-card__table th,
.elyon-fee-card__table td {
	padding: var(--s-3);
	text-align: start;
	border-bottom: 1px solid var(--c-rule);
}
.elyon-fee-card__table thead th {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--c-muted);
	background: var(--c-surface);
}
.elyon-fee-card__table tbody th { font-weight: 500; }
.elyon-fee-card__table-amount {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: end;
	font-weight: 600;
}
.elyon-fee-card__table tr:last-child th,
.elyon-fee-card__table tr:last-child td { border-bottom: 0; }

/* ---- Required documents ---- */
.elyon-adm-docs { padding: var(--s-9) var(--pad-edge); background: var(--c-bg); }
.elyon-adm-docs__inner { max-width: var(--w-wide); margin-inline: auto; }
.elyon-adm-docs__head { text-align: center; max-width: 640px; margin: 0 auto var(--s-7); }
.elyon-adm-docs__title {
	font-family: var(--ff-display);
	font-size: var(--fs-2xl);
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0 0 var(--s-3);
	text-wrap: balance;
}
.elyon-adm-docs__lede { color: var(--c-muted); margin: 0; }
.elyon-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: var(--s-3);
}
.elyon-checklist li {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	padding: var(--s-4) var(--s-5);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-left: 3px solid var(--c-accent);
	border-radius: var(--r-sm);
	font-size: 0.9375rem;
}
.elyon-checklist .elyon-icon {
	width: 22px;
	height: 22px;
	color: var(--c-secondary);
	flex-shrink: 0;
	margin-top: 2px;
}

/* ---- At a glance ---- */
.elyon-adm-glance {
	padding: clamp(var(--s-7), 8vw, var(--s-9)) var(--pad-edge);
	background: var(--c-secondary);
	color: var(--c-on-dark);
	border-top: 4px solid var(--c-accent);
}
.elyon-adm-glance__inner { max-width: var(--w-wide); margin-inline: auto; text-align: center; }
.elyon-adm-glance__title {
	font-family: var(--ff-display);
	font-size: var(--fs-2xl);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0 0 var(--s-7);
}
.elyon-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: var(--s-4);
	margin: 0;
	text-align: start;
}
.elyon-facts > div {
	padding: var(--s-5);
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: var(--r-sm);
	border-left: 3px solid var(--c-accent);
}
.elyon-facts dt {
	margin: 0 0 var(--s-2);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--c-accent);
}
.elyon-facts dd {
	margin: 0;
	font-family: var(--ff-display);
	font-size: 1.0625rem;
	font-weight: 500;
	color: #fff;
	line-height: 1.4;
	letter-spacing: -0.005em;
}

/* ---- FAQ ---- */
.elyon-adm-faq { padding: var(--s-9) var(--pad-edge); background: var(--c-bg); }
.elyon-adm-faq__inner { max-width: 800px; margin-inline: auto; }
.elyon-adm-faq__head { text-align: center; margin: 0 0 var(--s-7); }
.elyon-adm-faq__title {
	font-family: var(--ff-display);
	font-size: var(--fs-2xl);
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0 0 var(--s-3);
	text-wrap: balance;
}
/* FAQ section wrapper — used by elyon_render_faqs() to drop a styled
   FAQ block onto any page that has Q&A pairs in its FAQ meta box. */
.elyon-faq-section {
	padding: clamp(var(--s-6), 5vw, var(--s-8)) var(--pad-edge);
	background: var(--c-ivory);
}
.elyon-faq-section__inner {
	max-width: var(--w-prose);
	margin-inline: auto;
}
.elyon-faq-section__title {
	font-family: var(--ff-display);
	font-size: var(--fs-3xl);
	font-weight: var(--fw-medium);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--c-text);
	text-align: center;
	margin: 0 0 var(--s-6);
	text-wrap: balance;
}
.elyon-faq__answer {
	padding: 0 var(--s-5) var(--s-4);
	color: var(--c-muted);
	line-height: 1.65;
}
.elyon-faq__answer p { margin: 0 0 var(--s-3); }
.elyon-faq__answer p:last-child { margin-bottom: 0; }

.elyon-faq { display: flex; flex-direction: column; gap: var(--s-3); }
.elyon-faq__item {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: border-color var(--t);
}
.elyon-faq__item[open] { border-color: var(--c-accent); }
.elyon-faq__item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-4) var(--s-5);
	font-family: var(--ff-display);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--c-text);
	min-height: 56px;
}
.elyon-faq__item summary::-webkit-details-marker { display: none; }
.elyon-faq__item summary::before {
	content: "+";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	background: var(--c-surface);
	color: var(--c-primary);
	border: 1px solid var(--c-border);
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	font-weight: 400;
	font-family: var(--ff-sans);
	transition: transform var(--t), background-color var(--t), color var(--t);
}
.elyon-faq__item[open] summary::before {
	content: "Ã¢Ë†â€™";
	background: var(--c-primary);
	color: #fff;
	border-color: var(--c-primary);
}
.elyon-faq__item summary:hover { background: rgba(135, 48, 42, 0.04); }
.elyon-faq__item summary:focus-visible { outline-offset: -3px; }
.elyon-faq__item p {
	margin: 0;
	padding: 0 var(--s-5) var(--s-5) calc(var(--s-5) + 28px + var(--s-4));
	color: var(--c-muted);
	line-height: 1.7;
}

/* ---- Inquiry section ---- */
.elyon-adm-inquire {
	padding: clamp(var(--s-7), 8vw, var(--s-9)) var(--pad-edge);
	background: var(--c-surface);
	scroll-margin-top: var(--s-7);
}
.elyon-adm-inquire__inner { max-width: var(--w-wide); margin-inline: auto; }
.elyon-adm-inquire__head { text-align: center; max-width: 720px; margin: 0 auto var(--s-7); }
.elyon-adm-inquire__title {
	font-family: var(--ff-display);
	font-size: var(--fs-2xl);
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0 0 var(--s-3);
	text-wrap: balance;
}
.elyon-adm-inquire__lede { color: var(--c-muted); margin: 0; }
.elyon-adm-inquire__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-6);
	align-items: start;
}
@media (min-width: 768px) {
	.elyon-adm-inquire__grid { grid-template-columns: 3fr 2fr; gap: var(--s-7); }
}
.elyon-adm-inquire__form {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	padding: var(--s-7) var(--s-6);
	box-shadow: var(--shadow-sm);
}
.elyon-adm-inquire__form-lede { color: var(--c-muted); font-size: 0.9375rem; margin: 0 0 var(--s-5); }
.elyon-grid-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-3);
}
@media (min-width: 480px) { .elyon-grid-2 { grid-template-columns: 1fr 1fr; } }

.elyon-adm-inquire__contact {
	background: var(--c-secondary);
	color: var(--c-on-dark);
	border-radius: var(--r-md);
	padding: var(--s-7) var(--s-6);
	border-top: 4px solid var(--c-accent);
}
.elyon-adm-inquire__contact-title {
	margin: 0 0 var(--s-5);
	font-family: var(--ff-display);
	font-size: 1.375rem;
	font-weight: 500;
	color: #fff;
	letter-spacing: -0.01em;
	padding-bottom: var(--s-3);
	border-bottom: 1px solid rgba(255,255,255,0.18);
}
.elyon-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}
.elyon-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
}
.elyon-contact-list .elyon-icon {
	width: 22px;
	height: 22px;
	color: var(--c-accent);
	margin-top: 2px;
	flex-shrink: 0;
}
.elyon-contact-list__label {
	margin: 0 0 var(--s-1);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--c-accent);
}
.elyon-contact-list__value {
	display: block;
	margin: 0;
	font-size: 1rem;
	color: #fff;
	font-style: normal;
	line-height: 1.5;
}
a.elyon-contact-list__value { color: #fff; text-decoration: none; }
a.elyon-contact-list__value:hover,
a.elyon-contact-list__value:focus-visible { text-decoration: underline; text-decoration-color: var(--c-accent); }

/* ---- Bible verse pull-quote ---- */
.elyon-adm-verse {
	padding: clamp(var(--s-6), 7vw, var(--s-8)) var(--pad-edge);
	background: var(--c-cream);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.elyon-adm-verse::before {
	content: """;
	position: absolute;
	top: -40px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--ff-display);
	font-size: 16rem;
	color: var(--c-accent);
	opacity: 0.18;
	z-index: -1;
	line-height: 1;
}
.elyon-adm-verse__inner { max-width: 720px; margin-inline: auto; text-align: center; }
.elyon-adm-verse__quote {
	margin: 0 0 var(--s-4);
	font-family: var(--ff-display);
	font-size: clamp(1.375rem, 2.5vw, 1.75rem);
	font-weight: 500;
	font-style: italic;
	font-variation-settings: "opsz" 144;
	line-height: 1.4;
	color: var(--c-text);
	text-wrap: balance;
}
.elyon-adm-verse__quote p { margin: 0 0 var(--s-3); }
.elyon-adm-verse__quote footer {
	font-family: var(--ff-sans);
	font-size: 0.8125rem;
	font-style: normal;
	color: var(--c-accent-deep);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.elyon-adm-verse__motto {
	margin: var(--s-5) 0 0;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--c-primary);
}

/* ============================================================
   CONTACT PAGE  (two-column layout)
   ============================================================ */
.elyon-contact__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-7);
	max-width: var(--w-wide);
	margin-inline: auto;
}
@media (min-width: 768px) {
	.elyon-contact__inner { grid-template-columns: 1fr 1fr; align-items: start; }
}
.elyon-contact__intro { margin-bottom: var(--s-5); }
.elyon-contact__heading {
	font-family: var(--ff-display);
	font-size: var(--fs-xl);
	font-weight: 500;
	margin: 0 0 var(--s-2);
	letter-spacing: -0.01em;
}
.elyon-contact__lede { color: var(--c-muted); margin: 0; }
.elyon-contact__form-lede { color: var(--c-muted); font-size: 0.9375rem; margin: 0 0 var(--s-5); }
.elyon-form-status:empty { display: none; }
.elyon-form-status p { margin: 0 0 var(--s-4); }

/* ============================================================
   SIDEBAR WIDGETS
   ============================================================ */
.elyon-widget {
	background: var(--c-ivory);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	padding: var(--s-5);
}
.elyon-widget__title {
	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;
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--c-rule);
	color: var(--c-secondary);
}
.elyon-widget__body { margin: 0; font-size: 0.9375rem; color: var(--c-muted); }
.elyon-widget__list { list-style: none; margin: 0; padding: 0; }
.elyon-widget__list li { border-bottom: 1px solid var(--c-rule); }
.elyon-widget__list li:last-child { border-bottom: 0; }
.elyon-widget__list a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--s-3) 0;
	color: var(--c-text);
	text-decoration: none;
	font-size: 0.9375rem;
}
.elyon-widget__list a:hover,
.elyon-widget__list a:focus-visible {
	color: var(--c-primary);
}
.elyon-widget__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 22px;
	padding: 0 var(--s-2);
	background: var(--c-surface);
	border-radius: var(--r-pill);
	font-size: 0.75rem;
	color: var(--c-muted);
	font-weight: 600;
}
.elyon-widget--search .elyon-search-form { margin-bottom: 0; }

/* Share widget ------------------------------------------------ */
.elyon-share {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-2);
}
.elyon-share__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2) var(--s-3);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	color: var(--c-text);
	text-decoration: none;
	font-size: 0.8125rem;
	font-weight: 600;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.elyon-share__btn .elyon-icon { width: 16px; height: 16px; flex: none; }
.elyon-share__btn:hover,
.elyon-share__btn:focus-visible {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: var(--c-on-dark, #fff);
}
.elyon-share__btn--whatsapp:hover,
.elyon-share__btn--whatsapp:focus-visible { background: #25D366; border-color: #25D366; }
.elyon-share__btn--facebook:hover,
.elyon-share__btn--facebook:focus-visible { background: #1877F2; border-color: #1877F2; }
.elyon-share__btn--twitter:hover,
.elyon-share__btn--twitter:focus-visible { background: #0f1419; border-color: #0f1419; }

/* Related posts widget ---------------------------------------- */
.elyon-related-posts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.elyon-related-posts__item { border-bottom: 1px solid var(--c-rule); }
.elyon-related-posts__item:last-child { border-bottom: 0; }
.elyon-related-posts__link {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: var(--s-3);
	align-items: center;
	padding: var(--s-3) 0;
	color: var(--c-text);
	text-decoration: none;
}
.elyon-related-posts__link:hover .elyon-related-posts__title,
.elyon-related-posts__link:focus-visible .elyon-related-posts__title {
	color: var(--c-primary);
}
.elyon-related-posts__thumb {
	width: 64px;
	height: 64px;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--c-surface);
	display: block;
}
.elyon-related-posts__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.elyon-related-posts__thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ff-display);
	font-size: 1.25rem;
	color: var(--c-secondary);
	background: var(--c-ivory);
	border: 1px solid var(--c-border);
}
.elyon-related-posts__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.elyon-related-posts__title {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--c-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.elyon-related-posts__date {
	font-size: 0.75rem;
	color: var(--c-muted);
	letter-spacing: 0.04em;
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.elyon-lightbox {
	position: fixed;
	inset: 0;
	display: none;
	z-index: 9990;
	background: rgba(20, 14, 10, 0.94);
	align-items: center;
	justify-content: center;
	padding: var(--s-5);
}
.elyon-lightbox.is-open { display: flex; }
.elyon-lightbox__figure {
	max-width: min(1200px, 96vw);
	max-height: 92vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-3);
}
.elyon-lightbox__img {
	max-width: 100%;
	max-height: 80vh;
	object-fit: contain;
	border-radius: var(--r-sm);
	background: #000;
}
.elyon-lightbox__caption {
	color: var(--c-on-dark);
	font-size: 0.875rem;
	text-align: center;
	max-width: 80ch;
}
.elyon-lightbox__close,
.elyon-lightbox__prev,
.elyon-lightbox__next {
	position: absolute;
	background: rgba(0,0,0,0.5);
	border: 1px solid rgba(255,255,255,0.6);
	color: #fff;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.elyon-lightbox__close { top: var(--s-4); inset-inline-end: var(--s-4); }
.elyon-lightbox__prev  { top: 50%; inset-inline-start: var(--s-4); transform: translateY(-50%); }
.elyon-lightbox__next  { top: 50%; inset-inline-end: var(--s-4); transform: translateY(-50%); }
.elyon-lightbox__close:hover, .elyon-lightbox__close:focus-visible,
.elyon-lightbox__prev:hover, .elyon-lightbox__prev:focus-visible,
.elyon-lightbox__next:hover, .elyon-lightbox__next:focus-visible {
	background: var(--c-primary);
	border-color: #fff;
}
.elyon-lightbox__counter {
	position: absolute;
	top: var(--s-4);
	inset-inline-start: var(--s-4);
	color: var(--c-on-dark);
	font-size: 0.8125rem;
	background: rgba(0,0,0,0.5);
	padding: var(--s-1) var(--s-3);
	border-radius: var(--r-pill);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 600;
}
body.elyon-lightbox-open { overflow: hidden; }

[data-elyon-lightbox] .wp-block-gallery a,
[data-elyon-lightbox] .gallery a,
[data-elyon-lightbox] figure a { cursor: zoom-in; }

/* ============================================================
   FORCED-COLORS / RTL / REDUCED MOTION
   ============================================================ */
@media (forced-colors: active) {
	.elyon-btn { border-color: ButtonText; }
	.elyon-feature, .elyon-program, .elyon-album__link, .elyon-widget,
	.elyon-fee-card, .elyon-step, .elyon-faq__item { border-color: CanvasText; }
	.elyon-icon { forced-color-adjust: auto; }
	:focus-visible { outline-color: Highlight; }
}

/* Users with "Increase contrast" enabled (macOS, iOS, Windows, Android):
   bump the muted greys closer to body text and darken every faint border
   so cards, rules, and dividers stop disappearing on low-contrast panels. */
@media (prefers-contrast: more) {
	:root {
		--c-muted:        #2A1F18;            /* was #4A3F37 — almost body text */
		--c-text-soft:    #1F1B17;
		--c-border:       #8A6F5F;
		--c-border-strong:#5D4037;
		--c-rule:         #8A6F5F;
	}
	a { text-decoration-thickness: 2px; }
	:focus-visible { outline-width: 4px; }
}

[dir="rtl"] .elyon-link span,
[dir="rtl"] .elyon-link .elyon-icon { transform: scaleX(-1); }
[dir="rtl"] .elyon-link:hover .elyon-icon,
[dir="rtl"] .elyon-link:focus-visible .elyon-icon { transform: scaleX(-1) translateX(3px); }

/* ============================================================
   SITE-WIDE ANNOUNCEMENT BAR  (slim, dismissable)
   Hidden by default; menu.js shows it on first paint and respects
   localStorage so dismissal is sticky across sessions.
   ============================================================ */
.elyon-notice {
	background: var(--c-dark-bg);
	color: var(--c-on-dark);
	font-size: 0.8125rem;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	position: relative;
	z-index: 65;
}
.elyon-notice__inner {
	max-width: var(--w-wide);
	margin-inline: auto;
	padding: var(--s-2) var(--pad-edge);
	display: flex;
	align-items: center;
	gap: var(--s-3);
	min-height: 40px;
}
.elyon-notice__dot {
	width: 8px;
	height: 8px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--c-accent);
	box-shadow: 0 0 0 4px rgba(15, 15, 15, 0.18);
	animation: elyon-pulse-gold 2.4s ease-in-out infinite;
}
@keyframes elyon-pulse-gold {
	0%, 100% { box-shadow: 0 0 0 4px rgba(15, 15, 15, 0.18); }
	50%      { box-shadow: 0 0 0 7px rgba(15, 15, 15, 0.32); }
}
.elyon-notice__text {
	margin: 0;
	flex: 1;
	letter-spacing: 0.02em;
	color: rgba(232, 222, 196, 0.92);
}
.elyon-notice__cta {
	color: var(--c-accent);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--t);
}
.elyon-notice__cta:hover, .elyon-notice__cta:focus-visible { border-bottom-color: var(--c-accent); color: var(--c-accent); }
.elyon-notice__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 50%;
	color: rgba(232, 222, 196, 0.78);
	transition: background-color var(--t), color var(--t), border-color var(--t);
	flex-shrink: 0;
}
.elyon-notice__close:hover, .elyon-notice__close:focus-visible {
	background: rgba(255,255,255,0.08);
	color: #fff;
	border-color: rgba(255,255,255,0.4);
}
@media (max-width: 480px) {
	.elyon-notice__text { font-size: 0.75rem; }
}

/* ============================================================
   FOOTER MONOGRAM  (stamped E + motto over hairline rules)
   ============================================================ */
.elyon-footer__monogram {
	max-width: var(--w-wide);
	margin: 0 auto var(--s-7);
	display: grid;
	grid-template-columns: auto 1fr auto 1fr auto;
	align-items: center;
	gap: var(--s-5);
	padding-bottom: var(--s-7);
	border-bottom: 1px solid rgba(232, 222, 196, 0.12);
}
.elyon-footer__monogram::before,
.elyon-footer__monogram::after {
	content: "";
	display: block;
	width: 28px;
	height: 28px;
	border: 1px solid var(--c-accent);
	border-radius: 50%;
	opacity: 0.75;
}
.elyon-footer__mono-mark {
	font-family: var(--ff-display);
	font-size: clamp(3.5rem, 8vw, 5.5rem);
	font-weight: 400;
	font-variation-settings: "opsz" 144, "SOFT" 0;
	font-style: italic;
	color: var(--c-accent);
	line-height: 1;
	letter-spacing: -0.04em;
	display: inline-flex;
	padding: 0 var(--s-2);
}
.elyon-footer__mono-rule {
	display: block;
	width: 100%;
	height: 1px;
	background: rgba(15, 15, 15, 0.45);
}
.elyon-footer__mono-text {
	font-family: var(--ff-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--c-accent);
	/* Allow wrap at narrow viewports Ã¢â‚¬â€ nowrap caused page-level overflow at 320px. */
	text-align: center;
}
@media (max-width: 768px) {
	.elyon-footer__monogram {
		grid-template-columns: auto;
		justify-items: center;
		gap: var(--s-3);
		text-align: center;
	}
	.elyon-footer__monogram::before,
	.elyon-footer__monogram::after { display: none; }
	.elyon-footer__mono-rule { width: 80px; }
	.elyon-footer__mono-text { letter-spacing: 0.22em; font-size: 0.7rem; }
}

/* ============================================================
   ABOUT US PAGE
   Editorial layout: hero pill Ã¢â€ â€™ welcome diptych Ã¢â€ â€™ story w/ years badge Ã¢â€ â€™
   mission/vision diptych Ã¢â€ â€™ 3 numbered pillars Ã¢â€ â€™ 6-feature "what sets
   us apart" grid Ã¢â€ â€™ 2 campus cards Ã¢â€ â€™ leadership w/ seal + pull-quote.
   Targets WCAG 2.2 AA: contrast Ã¢â€°Â¥ 4.5:1 for body text, Ã¢â€°Â¥ 3:1 for large
   text and non-text, target size Ã¢â€°Â¥ 24Ãƒâ€”24, visible 2px focus indicator.
   ============================================================ */
.elyon-about a:focus-visible,
.elyon-about button:focus-visible,
.elyon-about summary:focus-visible {
	outline: 3px solid var(--c-focus);
	outline-offset: 3px;
	border-radius: var(--r-sm);
}
/* Our Story Ã¢â‚¬â€ clean editorial single-column. No vertical figure. */
.elyon-about-story {
	background: var(--c-bg);
	padding: clamp(var(--s-5), 5vw, var(--s-7)) var(--pad-edge);
}
.elyon-about-story__inner {
	max-width: var(--w-narrow);
	margin-inline: auto;
	text-align: center;
}
.elyon-about-story__eyebrow {
	margin: 0 0 var(--s-3);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-primary);
}
.elyon-about-story__title {
	font-family: var(--ff-display);
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 500;
	font-variation-settings: "opsz" 144;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--c-text);
	margin: 0 0 var(--s-4);
	text-wrap: balance;
}
.elyon-about-story__title em {
	font-style: italic;
	font-weight: 500;
	color: var(--c-primary);
}
.elyon-about-story__attr {
	margin: 0 0 var(--s-6);
	font-size: 0.8125rem;
	font-style: italic;
	color: var(--c-muted);
}
.elyon-about-story__attr cite { font-style: italic; }
.elyon-about-story__body {
	max-width: 640px;
	margin: 0 auto;
	text-align: left;
}
.elyon-about-story__body p {
	margin: 0 0 var(--s-4);
	font-size: var(--fs-md);
	line-height: 1.7;
	color: var(--c-text);
}
.elyon-about-story__body p:last-child { margin-bottom: 0; }


/* Mission & Vision diptych */
.elyon-about-mv {
	background: var(--c-bg);
	padding: clamp(var(--s-5), 5vw, var(--s-7)) var(--pad-edge);
}
.elyon-about-mv__inner { max-width: var(--w-wide); margin-inline: auto; }
.elyon-about-mv__head { margin-bottom: var(--s-6); }
.elyon-about-mv__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: var(--s-5);
}
.elyon-about-mv__card {
	position: relative;
	padding: clamp(var(--s-6), 5vw, var(--s-7));
	border-radius: var(--r-md);
	border: 1px solid var(--c-border);
	background: var(--c-ivory);
	overflow: hidden;
}
.elyon-about-mv__card--vision {
	background: var(--c-dark-bg);
	color: var(--c-on-dark);
	border-color: transparent;
}
.elyon-about-mv__card--vision .elyon-about-mv__pull,
.elyon-about-mv__card--vision .elyon-about-mv__intro { color: var(--c-on-dark); }
.elyon-about-mv__card--vision .elyon-about-mv__list li { color: #E5DAB8; }
.elyon-about-mv__card--vision .elyon-icon { color: var(--c-accent-bright); }
.elyon-about-mv__card--mission {
	background: var(--c-cream);
	border-color: var(--c-border-strong);
}
.elyon-about-mv__eyebrow {
	margin: 0 0 var(--s-4);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.elyon-about-mv__card--vision .elyon-about-mv__eyebrow { color: var(--c-accent-bright); }
.elyon-about-mv__card--mission .elyon-about-mv__eyebrow { color: var(--c-accent-deep); }
.elyon-about-mv__pull {
	margin: 0 0 var(--s-5);
	font-family: var(--ff-display);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.elyon-about-mv__card--mission .elyon-about-mv__pull { color: var(--c-text); }
.elyon-about-mv__intro {
	margin: 0 0 var(--s-4);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
}
.elyon-about-mv__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--s-3);
}
.elyon-about-mv__list li {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	font-size: var(--fs-sm);
	line-height: 1.55;
}
.elyon-about-mv__list .elyon-icon {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--c-accent-deep);
}

/* Three pillars */
.elyon-about-values {
	background: var(--c-surface);
	padding: clamp(var(--s-5), 5vw, var(--s-7)) var(--pad-edge);
}
.elyon-about-values__inner { max-width: var(--w-wide); margin-inline: auto; }
.elyon-pillars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-5);
	counter-reset: pillar;
}
.elyon-pillar {
	position: relative;
	padding: var(--s-7) var(--s-6) var(--s-6);
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}
.elyon-pillar:hover {
	border-color: var(--c-accent);
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}
.elyon-pillar::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
}
.elyon-pillar__num {
	position: absolute;
	top: var(--s-4);
	right: var(--s-5);
	font-family: var(--ff-display);
	font-style: italic;
	font-size: 2.25rem;
	color: rgba(15, 15, 15, 0.32);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	pointer-events: none;
}
.elyon-pillar__doodle {
	display: inline-flex;
	width: 56px;
	height: 56px;
	margin-bottom: var(--s-4);
	color: var(--c-primary);
}
.elyon-pillar__doodle .elyon-doodle { width: 100%; height: 100%; }
.elyon-pillar__title {
	margin: 0 0 var(--s-3);
	font-family: var(--ff-display);
	font-size: var(--fs-xl);
	font-weight: 500;
	letter-spacing: -0.01em;
}
.elyon-pillar__body { margin: 0; color: var(--c-text-soft); font-size: var(--fs-sm); line-height: 1.6; }
@media (max-width: 820px) {
	.elyon-pillars { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* Campuses Ã¢â‚¬â€ 2 cards */
.elyon-about-campuses {
	background: var(--c-ivory);
	padding: clamp(var(--s-5), 5vw, var(--s-7)) var(--pad-edge);
}
.elyon-about-campuses__inner { max-width: var(--w-wide); margin-inline: auto; }
.elyon-about-camp-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: var(--s-5);
}
.elyon-about-camp {
	position: relative;
	padding: clamp(var(--s-6), 4vw, var(--s-7));
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.elyon-about-camp:hover {
	border-color: var(--c-accent);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
.elyon-about-camp__tag {
	display: inline-block;
	margin: 0 0 var(--s-4);
	padding: var(--s-1) var(--s-3);
	background: var(--c-cream);
	border-radius: var(--r-pill);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-accent-deep);
}
.elyon-about-camp__name {
	margin: 0 0 var(--s-3);
	font-family: var(--ff-display);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 500;
	letter-spacing: -0.02em;
}
.elyon-about-camp__addr {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin-bottom: var(--s-3);
	font-style: normal;
	font-size: var(--fs-sm);
	color: var(--c-muted);
}
.elyon-about-camp__addr .elyon-icon { color: var(--c-primary); flex-shrink: 0; }
.elyon-about-camp__note {
	margin: 0 0 var(--s-5);
	color: var(--c-text-soft);
	font-size: var(--fs-md);
	line-height: 1.6;
}

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

/* ============================================================
   ADMISSIONS â€” DOCUMENT-STYLE PAGE (single section, mirrors PDF)
   ============================================================ */
.elyon-adm-doc {
	padding: clamp(var(--s-7), 8vw, var(--s-9)) var(--pad-edge);
	/* Layered "page" — warm gradient base + a gentle brand glow at the top.
	   Replaces the flat single-tone surface so the document feels like a
	   sheet of paper resting on the school's letterhead, not a wall. */
	background:
		radial-gradient(ellipse at 50% 0%, rgba(135, 48, 42, 0.05), transparent 55%),
		linear-gradient(180deg, var(--c-ivory) 0%, var(--c-cream) 100%);
	scroll-margin-top: var(--s-7);
	position: relative;
	isolation: isolate;
}
/* Letterhead stripe — Elyon's school colours (maroon → gold) at the top edge,
   giving the page an immediate official feel without adding noise. */
.elyon-adm-doc::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg,
		var(--c-primary) 0%,
		var(--c-primary) 65%,
		var(--c-gold) 65%,
		var(--c-gold) 100%);
	z-index: 1;
}
.elyon-adm-doc__inner {
	max-width: 880px;
	margin-inline: auto;
	/* Lift the document above the textured page — feels like an actual sheet
	   of paper. White surface keeps the content high-contrast and printable. */
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	padding: clamp(var(--s-5), 5vw, var(--s-8));
	box-shadow:
		0 1px 0 rgba(26, 22, 18, 0.03),
		0 12px 32px -16px rgba(26, 22, 18, 0.10),
		0 28px 64px -28px rgba(26, 22, 18, 0.14);
}

/* Screen header */
.elyon-adm-doc__head {
	margin: 0 0 var(--s-7);
	padding-bottom: var(--s-5);
	border-bottom: 1px solid var(--c-border);
}
.elyon-adm-doc__title {
	font-family: var(--ff-display);
	font-size: var(--fs-2xl);
	font-weight: 500;
	font-variation-settings: "opsz" 144;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: var(--s-3) 0 var(--s-3);
	color: var(--c-text);
}
.elyon-adm-doc__lede {
	margin: 0 0 var(--s-5);
	color: var(--c-muted);
	max-width: 680px;
}
.elyon-adm-doc__actions {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3) var(--s-5);
	margin: 0;
}
.elyon-adm-doc__actions-hint {
	font-size: 0.8125rem;
	color: var(--c-muted);
}

/* Each fee tier â€” flat, document-like, no card chrome */
.elyon-adm-doc__tier {
	margin: 0;
	padding-bottom: var(--s-7);
	border-bottom: 1px solid var(--c-border);
}
.elyon-adm-doc__tier:last-of-type {
	border-bottom: 0;
}
.elyon-adm-doc__tier + .elyon-adm-doc__tier {
	padding-top: var(--s-7);
}
.elyon-adm-doc__tier-heading {
	font-family: var(--ff-display);
	font-size: 1.375rem;
	font-weight: 500;
	color: var(--c-text);
	margin: 0 0 var(--s-4);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	text-decoration-color: var(--c-primary);
}

/* Tables â€” clean borders matching the PDF */
.elyon-adm-doc__table-wrap {
	overflow-x: auto;
}
.elyon-adm-doc__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	background: #fff;
}
.elyon-adm-doc__table th,
.elyon-adm-doc__table td {
	padding: 10px 14px;
	border: 1px solid var(--c-border);
	vertical-align: top;
	text-align: left;
}
.elyon-adm-doc__table thead th {
	background: rgba(15,15,15,0.08);
	color: var(--c-accent-deep);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.elyon-adm-doc__table tbody th {
	font-weight: 500;
	color: var(--c-text);
	background: #fff;
}
.elyon-adm-doc__amount {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	width: 1%;
}
.elyon-adm-doc__comment {
	color: var(--c-muted);
}

/* TOTAL row inside the tier table — bold and clearly distinguished. Warm
   gold tint feels celebratory (vs. the previous cold grey) and ties back to
   the gold accents in the school's tie/award stitching. */
.elyon-adm-doc__total-row th,
.elyon-adm-doc__total-row td {
	background: var(--c-gold-soft);
	font-weight: 700;
	color: var(--c-text);
	border-top-width: 2px;
	border-top-color: var(--c-primary);
}
.elyon-adm-doc__total-row td.elyon-adm-doc__amount {
	color: var(--c-primary-text);  /* darker brick — AAA 7.4:1 on the grey total bg */
	font-size: 1.0625rem;
	font-family: var(--ff-display);
	font-weight: 500;
}

/* Generic block (Transport / Swimming / Other Requirements / Quick contact) */
.elyon-adm-doc__block {
	margin: var(--s-7) 0 var(--s-6);
	padding-top: var(--s-5);
	border-top: 1px solid var(--c-border);
}
.elyon-adm-doc__block-heading {
	font-family: var(--ff-display);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--c-text);
	margin: 0 0 var(--s-3);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.elyon-adm-doc__block-aside {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--c-muted);
	letter-spacing: 0;
	text-transform: none;
}
.elyon-adm-doc__block-note {
	margin: var(--s-3) 0 0;
	color: var(--c-muted);
	font-size: 0.9375rem;
	font-style: italic;
}

/* Inline block (e.g. Swimming â€” heading + amount on one tidy row) */
.elyon-adm-doc__block--inline .elyon-adm-doc__block-heading {
	display: inline-block;
	margin-right: var(--s-3);
}
.elyon-adm-doc__inline-amount {
	display: inline-block;
	margin: 0;
	font-family: var(--ff-display);
	font-size: 1.25rem;
	color: var(--c-primary);
	font-variant-numeric: tabular-nums;
}

/* Transport zones â€” definition list */
.elyon-adm-doc__zones {
	margin: 0;
	display: grid;
	gap: 6px;
}
.elyon-adm-doc__zones-row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: var(--s-3);
	padding: 8px 0;
	border-bottom: 1px dashed var(--c-border);
}
.elyon-adm-doc__zones-row:last-child {
	border-bottom: 0;
}
.elyon-adm-doc__zones dt {
	margin: 0;
	color: var(--c-text);
	font-size: 0.9375rem;
}
.elyon-adm-doc__zones dd {
	margin: 0;
	font-family: var(--ff-display);
	font-size: 1rem;
	color: var(--c-accent-deep);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Quick contact list â€” same shape as Transport */
.elyon-adm-doc__contact {
	margin: 0;
	display: grid;
	gap: 6px;
}
.elyon-adm-doc__contact-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	align-items: baseline;
	gap: var(--s-3);
	padding: 8px 0;
	border-bottom: 1px dashed var(--c-border);
}
.elyon-adm-doc__contact-row:last-child {
	border-bottom: 0;
}
.elyon-adm-doc__contact dt {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-muted);
}
.elyon-adm-doc__contact dd {
	margin: 0;
	font-size: 1rem;
	color: var(--c-text);
}
.elyon-adm-doc__contact dd a {
	color: var(--c-primary);
	text-decoration: none;
}
.elyon-adm-doc__contact dd a:hover { text-decoration: underline; }

/* Scholastic table â€” same look as fee table but wider */
.elyon-adm-doc__table--scholastic {
	font-size: 0.8125rem;
	min-width: 720px;
}
.elyon-adm-doc__table--scholastic th,
.elyon-adm-doc__table--scholastic td {
	padding: 8px 10px;
	text-align: center;
}
.elyon-adm-doc__table--scholastic tbody th {
	text-align: left;
	white-space: nowrap;
	background: rgba(26,22,18,0.02);
	font-weight: 600;
}

/* "Quick ways to reach us" — promoted to a CTA-styled card so it stands
   out as the action-oriented section parents care about most. The list
   structure is preserved (still a <dl>); only the visual chrome changes.
   Colours: pale rose surface (--c-primary-soft) + maroon left accent —
   --c-text on --c-primary-soft = 16:1 contrast (AAA). */
.elyon-adm-doc__block:has(.elyon-adm-doc__contact) {
	margin-top: var(--s-7);
	padding: var(--s-5) clamp(var(--s-4), 4vw, var(--s-6));
	background: var(--c-primary-soft);
	border-top: 0;
	border-left: 4px solid var(--c-primary);
	border-radius: 0 var(--r-md) var(--r-md) 0;
}
.elyon-adm-doc__block:has(.elyon-adm-doc__contact) .elyon-adm-doc__block-heading {
	color: var(--c-primary-text);   /* darker brick — AAA 8.5:1 on pale rose */
	margin-bottom: var(--s-4);
}
.elyon-adm-doc__block:has(.elyon-adm-doc__contact) .elyon-adm-doc__contact-row {
	border-bottom-color: rgba(135, 48, 42, 0.18);   /* maroon-tinted dashed rule */
}
.elyon-adm-doc__block:has(.elyon-adm-doc__contact) .elyon-adm-doc__contact dt {
	color: var(--c-primary-text);   /* AAA on pale rose */
}

/* Closing — verse + tagline. Promoted to an outstanding gold-tinted card
   that ties to the gold accents used elsewhere on the page (total rows,
   letterhead stripe). All text colours verified AAA on --c-gold-soft:
   --c-text 14.6:1, --c-primary-text 7.8:1, --c-muted 8.9:1. */
.elyon-adm-doc__closing {
	margin: var(--s-7) 0 0;
	padding: var(--s-6) clamp(var(--s-4), 4vw, var(--s-6));
	background: var(--c-gold-soft);
	border-top: 0;
	border-radius: var(--r-md);
	text-align: center;
	position: relative;
}
/* Decorative gold rule above the closing card — soft top accent that
   echoes the letterhead stripe at the page top, closing the document
   visually. */
.elyon-adm-doc__closing::before {
	content: "";
	display: block;
	width: 56px;
	height: 2px;
	background: var(--c-primary);
	margin: 0 auto var(--s-4);
}
.elyon-adm-doc__closing-msg {
	margin: 0 0 var(--s-4);
	color: var(--c-text);
	font-size: 1.0625rem;
}
.elyon-adm-doc__verse {
	margin: 0 auto var(--s-4);
	max-width: 540px;
	font-family: var(--ff-display);
	font-size: 1.125rem;
	font-style: italic;
	color: var(--c-text);
	line-height: 1.5;
}
.elyon-adm-doc__verse footer {
	margin-top: 6px;
	font-style: normal;
	font-size: 0.8125rem;
	color: var(--c-muted);
}
.elyon-adm-doc__tagline {
	margin: 0;
	font-family: var(--ff-display);
	font-size: 1.125rem;
	color: var(--c-primary);
	letter-spacing: 0.04em;
}

/* Print-only header (hidden on screen) */
.elyon-adm-doc__print-header { display: none; }

/* Mobile: collapse contact label/value into a stack */
@media (max-width: 640px) {
	.elyon-adm-doc__contact-row {
		grid-template-columns: 1fr;
		gap: 2px;
	}
	.elyon-adm-doc__zones-row {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   ADMISSIONS — narrow-viewport overrides (240px → 480px)
   The PDF button + tier tables don't fit at the 240px floor with
   the desktop padding & button sizing. Tighten everything so the
   page sits cleanly inside the viewport with a single tap target.
   ============================================================ */
@media (max-width: 720px) {
	.elyon-adm-doc {
		padding: var(--s-6) clamp(12px, 4vw, var(--s-5));
	}
	.elyon-adm-doc__title { font-size: var(--fs-xl); }
	.elyon-adm-doc__tier-heading { font-size: 1.125rem; }
	/* PDF action — full-width, smaller padding so the label fits at 240px. */
	.elyon-adm-doc__actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--s-3);
		width: 100%;
	}
	.elyon-adm-doc__actions .elyon-btn {
		width: 100%;
		padding: 0 var(--s-4);
		font-size: 0.875rem;
		white-space: normal;
		min-height: 44px;
		text-align: center;
	}
	.elyon-adm-doc__actions-hint {
		font-size: 0.75rem;
		text-align: center;
	}
	/* Tier tables — keep horizontal scroll, tighten cell padding so a
	   couple more characters fit before the scroll kicks in. */
	.elyon-adm-doc__table { font-size: 0.8125rem; }
	.elyon-adm-doc__table th,
	.elyon-adm-doc__table td { padding: 8px 10px; }
	.elyon-adm-doc__table thead th { font-size: 0.625rem; letter-spacing: 0.1em; }
	.elyon-adm-doc__total-row td.elyon-adm-doc__amount { font-size: 0.9375rem; }
	/* Make the scroll affordance visible on touch. */
	.elyon-adm-doc__table-wrap {
		margin-inline: calc(-1 * clamp(12px, 4vw, var(--s-5)));
		padding-inline: clamp(12px, 4vw, var(--s-5));
		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 360px) {
	.elyon-adm-doc { padding: var(--s-5) 12px; }
	.elyon-adm-doc__title { font-size: 1.375rem; }
	.elyon-adm-doc__tier-heading { font-size: 1rem; letter-spacing: 0; }
	.elyon-adm-doc__actions .elyon-btn { font-size: 0.8125rem; }
	.elyon-adm-doc__table { font-size: 0.75rem; }
	.elyon-adm-doc__table th,
	.elyon-adm-doc__table td { padding: 6px 8px; }
}

/* ============================================================
   PRINT STYLESHEET â€” Save as PDF from the requirements section
   ============================================================ */
@media print {
	@page {
		size: A4 portrait;
		margin: 10mm 11mm;       /* tighter than the previous 14mm 12mm — more usable area, less whitespace */
	}

	html, body {
		background: #fff !important;
		color: #1a1612 !important;
		font-size: 9pt;          /* was 10pt — fits more content per A4 page without losing legibility */
		line-height: 1.32;       /* was 1.4 — denser line stacking */
	}

	/* Hide everything except the document section. */
	.elyon-header,
	.elyon-footer,
	.elyon-page-hero,
	.elyon-page-content,
	.elyon-cta,
	#elyon-main > section:not(.elyon-adm-doc) {
		display: none !important;
	}
	main, .elyon-main { display: block !important; padding: 0 !important; }

	.elyon-adm-doc {
		padding: 0 !important;
		background: #fff !important;
	}
	/* Strip the screen-only letterhead stripe + sheet-of-paper card chrome
	   so the printed PDF is a clean black-on-white document. */
	.elyon-adm-doc::before { display: none !important; }
	.elyon-adm-doc__inner {
		max-width: 100% !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		padding: 0 !important;
	}
	/* Strip the screen-only CTA + closing card chrome so the PDF prints as
	   a flat black-on-white official document — no decorative tints
	   competing with text legibility on low-quality printers or when
	   a parent prints in grayscale. */
	.elyon-adm-doc__block:has(.elyon-adm-doc__contact),
	.elyon-adm-doc__closing {
		background: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		padding: 3mm 0 !important;
	}
	.elyon-adm-doc__closing::before { display: none !important; }
	.elyon-adm-doc__block:has(.elyon-adm-doc__contact) {
		border-top: 0.5pt solid #1a1612 !important;
	}
	.elyon-adm-doc__closing {
		border-top: 1pt solid #1a1612 !important;
	}

	/* Show the print-only PDF letterhead. Includes site title +
	   tagline + "School Requirements" + PO Box + both campus phones,
	   so the saved PDF is a self-contained school document. */
	.elyon-adm-doc__print-header {
		display: block !important;
		text-align: center;
		margin: 0 0 4mm;
		padding-bottom: 2.5mm;
		border-bottom: 1pt solid #1a1612;
	}
	.elyon-adm-doc__brand {
		margin: 0;
		font-family: Poppins, Inter, sans-serif;
		/* 13pt fits "ELYON KINDERGARTEN AND PRIMARY SCHOOL" on one
		   line at the new 11mm side margins (≈ 188mm content width). */
		font-size: 13pt;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: #000 !important;
		line-height: 1.15;
	}
	/* Tagline line — sits directly under the brand name; smaller and
	   not uppercased so it reads as a subtitle, not a second title. */
	.elyon-adm-doc__brand-sub {
		margin: 0.5mm 0 0;
		font-size: 9.5pt;
		font-weight: 500;
		color: #1a1612 !important;
		font-style: italic;
	}
	.elyon-adm-doc__sub {
		margin: 1mm 0 0;
		font-size: 10pt;
		font-weight: 700;
		text-decoration: underline;
	}
	.elyon-adm-doc__contact-line {
		margin: 0.8mm 0 0;
		font-size: 8.5pt;
	}

	/* Hide screen-only header chrome */
	.elyon-adm-doc__head { display: none !important; }

	/* Tier sections — let tables break across pages naturally instead of
	   forcing the whole tier onto a single page (which created the big
	   whitespace gap at the bottom of page 1). The heading-with-row
	   protection below still keeps things readable at break points. */
	.elyon-adm-doc__tier {
		margin: 0 0 2.5mm !important;
		page-break-inside: auto;
		break-inside: auto;
	}
	.elyon-adm-doc__tier-heading {
		font-size: 10pt !important;
		margin: 1.5mm 0 1mm !important;
		text-decoration: underline !important;
		page-break-after: avoid;     /* keep heading attached to first data row */
		break-after: avoid;
	}
	.elyon-adm-doc__table {
		font-size: 8.5pt !important;
	}
	.elyon-adm-doc__table th,
	.elyon-adm-doc__table td {
		padding: 1mm 1.5mm !important;
		border: 0.5pt solid #1a1612 !important;
	}
	.elyon-adm-doc__table tr {
		page-break-inside: avoid;    /* don't split a single row across pages */
		break-inside: avoid;
	}
	.elyon-adm-doc__table thead {
		display: table-header-group; /* repeat <thead> on each page when a table breaks */
	}
	/* Table chrome — swap the cream/gold tints for neutral greys.
	   Neutral grey + pure black text gives the highest possible legibility
	   on every printer (including grayscale and low-quality inkjets) and
	   stops the colour from ever competing with the numbers. */
	.elyon-adm-doc__table thead th {
		background: #e6e6e6 !important;     /* light neutral grey */
		color: #000 !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	.elyon-adm-doc__total-row th,
	.elyon-adm-doc__total-row td {
		background: #d0d0d0 !important;     /* slightly darker grey — clearly distinct */
		color: #000 !important;
		font-weight: 700 !important;
		border-top: 1pt solid #000 !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	.elyon-adm-doc__total-row td.elyon-adm-doc__amount {
		font-size: 10.5pt !important;
		font-family: Poppins, Inter, sans-serif;
		color: #000 !important;
	}

	/* Generic block (Transport / Swimming / Scholastic / Quick contact).
	   Allow blocks to break across pages — the small ones still try to
	   stay together via the tighter spacing, but a long Other-requirements
	   table won't push the entire block to the next page. */
	.elyon-adm-doc__block {
		margin: 2.5mm 0 !important;
		padding-top: 2mm !important;
		border-top: 0.5pt solid #1a1612 !important;
		page-break-inside: auto;
		break-inside: auto;
	}
	.elyon-adm-doc__block-heading {
		font-size: 10pt !important;
		margin: 0 0 1.5mm !important;
		page-break-after: avoid;
		break-after: avoid;
	}
	.elyon-adm-doc__inline-amount {
		font-size: 10pt !important;
		color: #1a1612 !important;
	}
	.elyon-adm-doc__zones dt,
	.elyon-adm-doc__contact dt { font-size: 8.5pt !important; }
	.elyon-adm-doc__zones dd,
	.elyon-adm-doc__contact dd { font-size: 9pt !important; color: #1a1612 !important; }

	/* Tighter zone / contact rows so the lists don't spill onto extra pages. */
	.elyon-adm-doc__zones-row,
	.elyon-adm-doc__contact-row {
		padding: 1mm 0 !important;
	}

	.elyon-adm-doc__table--scholastic {
		font-size: 7.5pt !important;
		min-width: 0 !important;
	}
	.elyon-adm-doc__table--scholastic th,
	.elyon-adm-doc__table--scholastic td {
		padding: 0.8mm !important;
	}

	/* Closing — small enough to fit on one page; keep it together so the
	   verse + tagline don't get awkwardly split. */
	.elyon-adm-doc__closing {
		margin: 3mm 0 0 !important;
		padding-top: 2mm !important;
		border-top: 1pt solid #1a1612 !important;
		page-break-inside: avoid;
		break-inside: avoid;
	}
	.elyon-adm-doc__closing-msg { font-size: 9pt !important; margin: 0 0 1.5mm !important; }
	.elyon-adm-doc__verse { font-size: 9.5pt !important; margin: 0 auto 1.5mm !important; }
	.elyon-adm-doc__verse footer { font-size: 8pt !important; }
	.elyon-adm-doc__tagline {
		font-size: 9.5pt !important;
		font-family: Poppins, Inter, sans-serif;
		font-weight: 700;
	}

	/* Strip link styling â€” print version reads as plain text */
	a, a:visited {
		color: #1a1612 !important;
		text-decoration: none !important;
	}
}

/* ============================================================
   ACADEMICS — TRADITIONAL SCHOOL-PROSPECTUS STYLE
   Restrained editorial layout. Clean tables, generous body type,
   brick-red used only as small typographical accents.
   ============================================================ */

.elyon-academics__doc {
	max-width: var(--w-narrow);
	margin: 0 auto;
	padding: clamp(var(--s-7), 8vw, var(--s-9)) var(--pad-edge);
	color: var(--c-text);
	font-size: var(--fs-md);
	line-height: 1.7;
}

/* Each section gets a generous gap. The first section runs flush to
   the page hero (no top padding); all others get a horizontal rule
   above so the page reads as one continuous, well-typeset document. */
.elyon-academics__section {
	margin-top: var(--s-8);
	padding-top: var(--s-8);
	border-top: 1px solid var(--c-border);
}
.elyon-academics__section:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.elyon-academics__eyebrow {
	margin: 0 0 var(--s-3);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-primary-text);
}

.elyon-academics__h2 {
	font-family: var(--ff-display);
	font-size: clamp(1.75rem, 3.5vw, 2.375rem);
	font-weight: 500;
	font-variation-settings: "opsz" 144;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--c-text);
	margin: 0 0 var(--s-5);
	text-wrap: balance;
}

.elyon-academics__h3 {
	font-family: var(--ff-display);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--c-text);
	margin: var(--s-7) 0 var(--s-4);
}

.elyon-academics__doc p {
	margin: 0 0 var(--s-4);
	color: var(--c-text);
}
.elyon-academics__doc p:last-child {
	margin-bottom: 0;
}

/* Mission section — restrained, dignified. No big display motto,
   no centered manifesto. Just a clear opening h2 + paragraphs. */
.elyon-academics__section--mission .elyon-academics__h2 {
	font-size: clamp(2rem, 4vw, 2.75rem);
}

/* Tables — classic prospectus style. Two columns, clean borders,
   subtle header row, brick-red 2px line under the header. */
.elyon-academics__table-wrap {
	margin: var(--s-5) 0;
	overflow-x: auto;
}
.elyon-academics__table {
	width: 100%;
	border-collapse: collapse;
	background: var(--c-bg);
	font-size: 0.9375rem;
	line-height: 1.6;
}
.elyon-academics__table thead th {
	padding: 12px 16px;
	text-align: left;
	font-family: var(--ff-display);
	font-weight: 500;
	font-size: 0.9375rem;
	color: var(--c-text);
	background: rgba(15, 15, 15, 0.03);
	border-bottom: 2px solid var(--c-primary);
}
.elyon-academics__table tbody th,
.elyon-academics__table tbody td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--c-border);
	vertical-align: top;
	text-align: left;
}
.elyon-academics__table tbody th {
	font-weight: 600;
	color: var(--c-text);
	width: 38%;
}
.elyon-academics__table tbody td {
	color: var(--c-muted);
}
.elyon-academics__table tbody tr:last-child th,
.elyon-academics__table tbody tr:last-child td {
	border-bottom: 0;
}

/* Definition list — used for the methodology pillars and the
   four committed promises. Term in brick-red, body indented. */
.elyon-academics__dl {
	margin: var(--s-5) 0 0;
	padding: 0;
}
.elyon-academics__dl dt {
	margin: var(--s-4) 0 4px;
	font-family: var(--ff-display);
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--c-text);
	position: relative;
	padding-left: var(--s-4);
}
.elyon-academics__dl dt::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 12px;
	height: 2px;
	background: var(--c-primary);
}
.elyon-academics__dl dt:first-child {
	margin-top: 0;
}
.elyon-academics__dl dd {
	margin: 0 0 0 var(--s-4);
	color: var(--c-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Track Record stats — inline, restrained. No big dark band, just
   a horizontal trio of stat rows above the paragraph. */
.elyon-academics__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--s-4);
	margin: var(--s-5) 0;
	padding: var(--s-5) 0;
	border-top: 1px solid var(--c-border);
	border-bottom: 1px solid var(--c-border);
}
.elyon-academics__stat dt {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp(1.875rem, 3.5vw, 2.5rem);
	font-weight: 500;
	color: var(--c-primary);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.elyon-academics__stat dd {
	margin: 6px 0 0;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--c-muted);
	text-transform: uppercase;
}

/* Closing scripture — centered blockquote, no decorative ornament. */
.elyon-academics__section--closing {
	text-align: center;
}
.elyon-academics__verse {
	max-width: 540px;
	margin: 0 auto;
	padding: 0;
	border: 0;
}
.elyon-academics__verse p {
	margin: 0 0 var(--s-3);
	font-family: var(--ff-display);
	font-size: clamp(1.25rem, 2.4vw, 1.625rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1.45;
	color: var(--c-text);
	text-wrap: balance;
}
.elyon-academics__verse footer {
	font-family: var(--ff-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-primary-text);
	font-style: normal;
}

/* Tablet — tighter section gaps, smaller h3 margin */
@media (max-width: 900px) {
	.elyon-academics__doc {
		padding: clamp(var(--s-6), 7vw, var(--s-7)) var(--pad-edge);
	}
	.elyon-academics__section {
		margin-top: var(--s-7);
		padding-top: var(--s-7);
	}
	.elyon-academics__h3 {
		margin: var(--s-6) 0 var(--s-3);
	}
}

/* Phone landscape / small tablet — table rows collapse into stacked cards */
@media (max-width: 600px) {
	.elyon-academics__table thead {
		display: none;
	}
	.elyon-academics__table,
	.elyon-academics__table tbody,
	.elyon-academics__table tr {
		display: block;
	}
	.elyon-academics__table tbody tr {
		padding: var(--s-4) 0;
		border-bottom: 1px solid var(--c-border);
	}
	.elyon-academics__table tbody tr:last-child {
		border-bottom: 0;
	}
	.elyon-academics__table tbody th,
	.elyon-academics__table tbody td {
		display: block;
		border: 0;
		padding: 0;
		width: 100%;
	}
	.elyon-academics__table tbody th {
		font-family: var(--ff-display);
		font-size: 1.0625rem;
		color: var(--c-text);
		margin-bottom: var(--s-1);
	}
}

/* Narrow phones */
@media (max-width: 480px) {
	.elyon-academics__doc {
		padding: var(--s-6) var(--pad-edge);
		font-size: 0.9375rem;
		line-height: 1.65;
	}
	.elyon-academics__section {
		margin-top: var(--s-6);
		padding-top: var(--s-6);
	}
	.elyon-academics__h2 { font-size: clamp( 1.5rem, 7vw, 1.875rem ); }
	.elyon-academics__section--mission .elyon-academics__h2 { font-size: clamp( 1.625rem, 7vw, 2rem ); }
	.elyon-academics__h3 {
		font-size: 1.125rem;
		margin: var(--s-5) 0 var(--s-3);
	}
	.elyon-academics__stats {
		gap: var(--s-3);
		padding: var(--s-4) 0;
		margin: var(--s-4) 0;
	}
	.elyon-academics__stat dt { font-size: clamp( 1.5rem, 6vw, 2rem ); }
	.elyon-academics__stat dd { font-size: 0.75rem; }
	.elyon-academics__dl dt {
		font-size: 1rem;
		padding-left: var(--s-3);
	}
	.elyon-academics__dl dt::before { width: 10px; }
	.elyon-academics__dl dd {
		margin-left: var(--s-3);
		font-size: 0.875rem;
	}
	.elyon-academics__verse p { font-size: 1.125rem; }
	.elyon-academics__contact-row {
		grid-template-columns: 1fr;
		gap: var(--s-3);
		padding: var(--s-4) 0;
		margin: var(--s-4) 0;
	}
}

/* Smallest target — 320px down to 240px */
@media (max-width: 360px) {
	.elyon-academics__doc {
		padding: var(--s-5) var(--s-3);
	}
	.elyon-academics__section {
		margin-top: var(--s-5);
		padding-top: var(--s-5);
	}
	.elyon-academics__eyebrow {
		font-size: 0.6875rem;
		letter-spacing: 0.14em;
	}
	.elyon-academics__h2 { font-size: 1.375rem; line-height: 1.2; }
	.elyon-academics__section--mission .elyon-academics__h2 { font-size: 1.5rem; }
	.elyon-academics__h3 { font-size: 1.0625rem; margin: var(--s-4) 0 var(--s-2); }
	.elyon-academics__stats {
		grid-template-columns: 1fr;   /* single-col stats so the big numbers stay readable */
	}
	.elyon-academics__stat {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: var(--s-3);
	}
	.elyon-academics__stat dt { font-size: 1.5rem; }
	.elyon-academics__stat dd { margin: 0; }
	.elyon-academics__verse { max-width: 100%; }
	.elyon-academics__verse p { font-size: 1rem; }
	.elyon-academics__verse footer { font-size: 0.75rem; }
	.elyon-academics__contact-row dt { font-size: 0.625rem; }
	.elyon-academics__contact-row dd { font-size: 0.9375rem; }
	.elyon-academics__table tbody th { font-size: 1rem; }
	.elyon-academics__table tbody td { font-size: 0.875rem; }
}

/* Contact details — used on Nsangi Campus page (and any prospectus
   page that needs an inline labelled key/value strip). */
.elyon-academics__contact-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--s-4);
	margin: var(--s-5) 0;
	padding: var(--s-5) 0;
	border-top: 1px solid var(--c-border);
	border-bottom: 1px solid var(--c-border);
}
.elyon-academics__contact-row > div { margin: 0; }
.elyon-academics__contact-row dt {
	margin: 0 0 4px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-muted);
}
.elyon-academics__contact-row dd {
	margin: 0;
	font-size: 1rem;
	color: var(--c-text);
}
.elyon-academics__contact-row dd a {
	color: var(--c-primary);
	text-decoration: none;
}
.elyon-academics__contact-row dd a:hover { text-decoration: underline; }

/* ============================================================
   NSANGI CAMPUS — editorial-magazine layout
   Bigger display type, asymmetric where it earns it, magazine-style
   numbered features. White throughout, brick-red as the only accent.
   ============================================================ */

/* ── Quick facts strip — bigger display values ──────────────── */
.elyon-nsangi__facts {
	padding: var(--s-6) var(--pad-edge);
	border-top: 1px solid var(--c-border);
	border-bottom: 1px solid var(--c-border);
	background: var(--c-bg);
}
.elyon-nsangi__facts-list {
	max-width: var(--w-wide);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}
.elyon-nsangi__facts-list > div {
	padding: 0 var(--s-4);
	border-left: 1px solid var(--c-border);
	text-align: center;
}
.elyon-nsangi__facts-list > div:first-child { border-left: 0; }
.elyon-nsangi__facts dt {
	margin: 0 0 6px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-muted);
}
.elyon-nsangi__facts dd {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	font-weight: 500;
	color: var(--c-text);
	letter-spacing: -0.01em;
}
.elyon-nsangi__facts dd a {
	color: var(--c-text);
	text-decoration: none;
}
.elyon-nsangi__facts dd a:hover { color: var(--c-primary); }
@media (max-width: 720px) {
	.elyon-nsangi__facts-list { grid-template-columns: 1fr 1fr; gap: var(--s-4) 0; }
	.elyon-nsangi__facts-list > div { border-left: 0; }
	.elyon-nsangi__facts-list > div:nth-child(odd) { border-right: 1px solid var(--c-border); }
}
@media (max-width: 480px) {
	.elyon-nsangi__facts-list { grid-template-columns: 1fr; gap: var(--s-3); }
	.elyon-nsangi__facts-list > div { border: 0 !important; padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-border) !important; }
	.elyon-nsangi__facts-list > div:last-child { border-bottom: 0 !important; padding-bottom: 0; }
}

/* ── Section head ──────────────────────────────────────────── */
.elyon-nsangi__section-head {
	max-width: var(--w-narrow);
	margin: 0 auto var(--s-6);
	text-align: center;
}

/* ── Welcome — wider centred prose, no drop cap ─────────────── */
.elyon-nsangi__welcome {
	max-width: 1040px;
	margin: 0 auto;
	padding: clamp(var(--s-7), 6vw, var(--s-8)) var(--pad-edge);
	text-align: center;
}
.elyon-nsangi__lede {
	margin: 0 auto var(--s-6);
	max-width: 820px;
	font-family: var(--ff-display);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.45;
	color: var(--c-text);
	font-style: italic;
}
.elyon-nsangi__welcome-body {
	max-width: 820px;
	margin: 0 auto;
	text-align: left;
}
.elyon-nsangi__welcome-body p {
	margin: 0 0 var(--s-4);
	font-size: var(--fs-md);
	line-height: 1.7;
	color: var(--c-text);
}
.elyon-nsangi__welcome-body p:last-child { margin-bottom: 0; }

/* ── Boarding spotlight — asymmetric 1.4 : 1, image-led ────── */
.elyon-nsangi__boarding {
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: clamp(var(--s-6), 5vw, var(--s-7)) var(--pad-edge);
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(var(--s-6), 6vw, var(--s-8));
	align-items: center;
}
.elyon-nsangi__boarding-media {
	margin: 0;
	border-radius: var(--r-md);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--c-cream);
}
.elyon-nsangi__boarding-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.elyon-nsangi__boarding-text p {
	margin: 0 0 var(--s-4);
	font-size: var(--fs-md);
	line-height: 1.7;
	color: var(--c-text);
}
.elyon-nsangi__boarding-text p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
	.elyon-nsangi__boarding { grid-template-columns: 1fr; }
}

/* ── Gallery — asymmetric: 1 wide + 2 stacked ──────────────── */
.elyon-nsangi__gallery {
	padding: clamp(var(--s-6), 5vw, var(--s-7)) var(--pad-edge);
}
.elyon-nsangi__gallery-head {
	max-width: var(--w-narrow);
	margin: 0 auto var(--s-6);
	text-align: center;
}
.elyon-nsangi__gallery-grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--w-wide);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-4);
}
.elyon-nsangi__gallery-grid figure { margin: 0; }
.elyon-nsangi__gallery-grid img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border-radius: var(--r-md);
}
.elyon-nsangi__gallery-grid figcaption {
	margin-top: var(--s-3);
	font-size: 0.875rem;
	color: var(--c-muted);
	letter-spacing: 0.02em;
	text-align: center;
}
@media (max-width: 760px) {
	.elyon-nsangi__gallery-grid { grid-template-columns: 1fr; }
}

/* ── "What stands out" — magazine numbered list ────────────── */
.elyon-nsangi__special {
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: clamp(var(--s-6), 5vw, var(--s-7)) var(--pad-edge);
}
.elyon-nsangi__special-lede {
	margin: 0;
	font-size: var(--fs-md);
	color: var(--c-muted);
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	font-style: italic;
}
.elyon-nsangi__special-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(var(--s-5), 4vw, var(--s-6)) clamp(var(--s-5), 4vw, var(--s-7));
}
.elyon-nsangi__special-list li {
	padding-top: var(--s-4);
	border-top: 2px solid var(--c-primary);
}
/* When the last row has a single orphan item, centre it. */
.elyon-nsangi__special-list li:last-child {
	grid-column: 1 / -1;
	max-width: 380px;
	margin-left: auto;
	margin-right: auto;
}
.elyon-nsangi__special-list h3 {
	margin: 0 0 var(--s-2);
	font-family: var(--ff-display);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--c-text);
}
.elyon-nsangi__special-list p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--c-muted);
}

/* ── Vision & Mission — bigger pull-quotes, prominent diptych ─ */
.elyon-nsangi__mv {
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: clamp(var(--s-6), 5vw, var(--s-7)) var(--pad-edge);
}
.elyon-nsangi__mv-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(var(--s-6), 6vw, var(--s-8));
	align-items: start;
}
.elyon-nsangi__mv-card + .elyon-nsangi__mv-card {
	padding-left: clamp(var(--s-6), 6vw, var(--s-8));
	border-left: 1px solid var(--c-border);
}
.elyon-nsangi__pull {
	margin: var(--s-3) 0 var(--s-5);
	font-family: var(--ff-display);
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--c-text);
	text-wrap: balance;
}
.elyon-nsangi__mv-lede {
	margin: 0 0 var(--s-5);
	color: var(--c-muted);
	font-size: 0.9375rem;
	font-style: italic;
}
.elyon-nsangi__mv-list { margin: 0; padding: 0; }
.elyon-nsangi__mv-list dt {
	margin: var(--s-4) 0 4px;
	padding: 0 0 0 var(--s-4);
	position: relative;
	font-family: var(--ff-display);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--c-text);
}
.elyon-nsangi__mv-list dt::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 12px;
	height: 2px;
	background: var(--c-primary);
}
.elyon-nsangi__mv-list dt:first-of-type { margin-top: 0; }
.elyon-nsangi__mv-list dd {
	margin: 0 0 0 var(--s-4);
	color: var(--c-muted);
	font-size: 0.9375rem;
	line-height: 1.55;
}
@media (max-width: 760px) {
	.elyon-nsangi__mv-grid { grid-template-columns: 1fr; }
	.elyon-nsangi__mv-card + .elyon-nsangi__mv-card {
		padding-left: 0;
		padding-top: clamp(var(--s-6), 6vw, var(--s-8));
		border-left: 0;
		border-top: 1px solid var(--c-border);
	}
}

/* ── Values — three numbered columns ───────────────────────── */
.elyon-nsangi__values {
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: clamp(var(--s-6), 5vw, var(--s-7)) var(--pad-edge);
}
.elyon-nsangi__values-grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(var(--s-5), 4vw, var(--s-7));
}
.elyon-nsangi__values-grid li {
	border-top: 2px solid var(--c-primary);
	padding-top: var(--s-5);
}
.elyon-nsangi__values-num {
	display: block;
	font-family: var(--ff-display);
	font-size: clamp(2rem, 3vw, 2.5rem);
	font-weight: 500;
	color: var(--c-primary);
	margin-bottom: var(--s-3);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}
.elyon-nsangi__values-grid h3 {
	margin: 0 0 var(--s-3);
	font-family: var(--ff-display);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 500;
	color: var(--c-text);
	letter-spacing: -0.01em;
}
.elyon-nsangi__values-grid p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--c-muted);
}
@media (max-width: 720px) {
	.elyon-nsangi__values-grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* ── Leadership — pulled italic blockquote ─────────────────── */
.elyon-nsangi__leadership {
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: clamp(var(--s-7), 6vw, var(--s-8)) var(--pad-edge);
	text-align: center;
}
.elyon-nsangi__leadership .elyon-academics__eyebrow {
	display: inline-block;
	margin-bottom: var(--s-5);
}
.elyon-nsangi__leadership-quote {
	max-width: 820px;
	margin: 0 auto;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--ff-display);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 500;
	line-height: 1.3;
	color: var(--c-text);
	font-style: italic;
	letter-spacing: -0.015em;
	text-wrap: balance;
	position: relative;
}
.elyon-nsangi__leadership-quote::before {
	content: "\201C";
	display: block;
	font-family: var(--ff-display);
	font-size: clamp(3rem, 6vw, 5rem);
	line-height: 0.5;
	color: var(--c-primary);
	margin-bottom: var(--s-3);
	font-style: normal;
}

/* ── Visit + Map — asymmetric 1 : 1.3 (map slightly larger) ── */
.elyon-nsangi__visit {
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: clamp(var(--s-6), 5vw, var(--s-7)) var(--pad-edge);
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: clamp(var(--s-5), 5vw, var(--s-7));
	align-items: start;
}
.elyon-nsangi__visit-text p {
	margin: 0 0 var(--s-5);
	font-size: var(--fs-md);
	line-height: 1.7;
	color: var(--c-text);
}
.elyon-nsangi__visit-contact {
	margin: 0 0 var(--s-5);
	padding: var(--s-5) 0;
	border-top: 1px solid var(--c-border);
	border-bottom: 1px solid var(--c-border);
	display: grid;
	gap: var(--s-3);
}
.elyon-nsangi__visit-contact > div {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: var(--s-3);
	align-items: baseline;
}
.elyon-nsangi__visit-contact dt {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-muted);
}
.elyon-nsangi__visit-contact dd {
	margin: 0;
	font-size: 1rem;
	color: var(--c-text);
}
.elyon-nsangi__visit-contact dd a {
	color: var(--c-primary);
	text-decoration: none;
}
.elyon-nsangi__visit-contact dd a:hover { text-decoration: underline; }
.elyon-nsangi__visit-cta {
	margin: 0;
	display: flex;
	gap: var(--s-3);
	flex-wrap: wrap;
}
.elyon-nsangi__visit-map {
	border-radius: var(--r-md);
	overflow: hidden;
	border: 1px solid var(--c-border);
	aspect-ratio: 4 / 3;
	background: var(--c-cream);
}
.elyon-nsangi__visit-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
@media (max-width: 760px) {
	.elyon-nsangi__visit { grid-template-columns: 1fr; }
	.elyon-nsangi__visit-contact > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ── Closing — dramatic centered scripture + brick-red motto ─ */
.elyon-nsangi__closing {
	padding: clamp(var(--s-7), 6vw, var(--s-8)) var(--pad-edge);
	text-align: center;
	border-top: 1px solid var(--c-border);
}
.elyon-nsangi__closing .elyon-academics__verse p {
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	line-height: 1.35;
}
.elyon-nsangi__motto {
	margin: var(--s-5) 0 0;
	font-family: var(--ff-display);
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-primary);
}

/* ── Christian symbols (sun, cross, star, leaves) ───────────── */
.elyon-nsangi__symbol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--c-primary);
	margin: 0 auto var(--s-4);
}
.elyon-nsangi__symbol .elyon-doodle {
	display: block;
	stroke-width: 1.6;
}
.elyon-nsangi__symbol--small .elyon-doodle { width: 32px; height: 32px; }
.elyon-nsangi__symbol--large .elyon-doodle { width: 48px; height: 48px; stroke-width: 1.4; }

.elyon-nsangi__welcome .elyon-nsangi__symbol--small {
	display: block;
	margin: 0 auto var(--s-4);
}

.elyon-nsangi__closing .elyon-nsangi__symbol--large {
	display: block;
	margin: 0 auto var(--s-5);
}

/* Values pillars get a small symbol above the numeral */
.elyon-nsangi__values-symbol {
	display: block;
	color: var(--c-primary);
	margin-bottom: var(--s-3);
}
.elyon-nsangi__values-symbol .elyon-doodle {
	display: block;
	width: 28px;
	height: 28px;
	stroke-width: 1.6;
}
.elyon-nsangi__values-grid .elyon-nsangi__values-num {
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	margin-bottom: var(--s-2);
}

/* ============================================================
   DIGITAL LIBRARY — search · category pills · row-style listing
   ============================================================ */
.elyon-library__inner {
	max-width: var(--w-wide);
	margin-inline: auto;
}

/* Toolbar: search + sort + submit */
.elyon-library__toolbar {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	align-items: stretch;
	margin: 0 0 var(--s-4);
}
.elyon-library__search {
	position: relative;
	display: flex;
	align-items: center;
	background: #fff;
	border: 1.5px solid #dadce0;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	transition: border-color var(--t), box-shadow var(--t);
}
.elyon-library__search:hover {
	border-color: var(--c-primary);
}
.elyon-library__search:focus-within {
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(135, 48, 42, 0.15);
}
.elyon-library__search-icon {
	position: absolute;
	left: 14px;
	color: var(--c-primary);
	opacity: 0.7;
	pointer-events: none;
}
.elyon-library__search input {
	width: 100%;
	height: 44px;
	padding: 0 var(--s-4) 0 42px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 1rem;                  /* 16px — prevent iOS Safari focus auto-zoom */
	color: var(--c-text);
	outline: 0;
}
.elyon-library__search input::placeholder {
	color: var(--c-muted);
}

/* Custom-styled sort select with chevron — visually balanced with the
   search bar, no default browser arrow. */
.elyon-library__sort {
	position: relative;
	display: block;
}
.elyon-library__sort::after {
	content: '';
	position: absolute;
	right: 14px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--c-primary);
	border-bottom: 2px solid var(--c-primary);
	transform: translateY(-65%) rotate(45deg);
	pointer-events: none;
	transition: border-color var(--t);
}
.elyon-library__sort select {
	height: 44px;
	padding: 0 36px 0 16px;
	border: 1.5px solid #dadce0;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	font: inherit;
	font-size: 1rem;                  /* 16px — prevent iOS Safari focus auto-zoom */
	font-weight: 500;
	color: var(--c-text);
	cursor: pointer;
	min-width: 170px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	transition: border-color var(--t), box-shadow var(--t);
}
.elyon-library__sort select:hover { border-color: var(--c-primary); }
.elyon-library__sort select:focus {
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(135, 48, 42, 0.15);
	outline: 0;
}
.elyon-library__submit {
	height: 48px;
	padding: 0 var(--s-5);
}

/* Category pills */
.elyon-library__cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: 0 0 var(--s-5);
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--c-border);
}
.elyon-library__cat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: transparent;
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	color: var(--c-text);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--t), color var(--t), border-color var(--t);
}
.elyon-library__cat:hover,
.elyon-library__cat:focus-visible {
	border-color: var(--c-primary);
	color: var(--c-primary);
}
.elyon-library__cat.is-active {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
}
.elyon-library__cat-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--r-pill);
	font-size: 0.6875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	background: var(--c-cream);
	color: var(--c-muted);
}
.elyon-library__cat.is-active .elyon-library__cat-count {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

/* Result summary */
.elyon-library__summary {
	margin: 0 0 var(--s-4);
	font-size: 0.875rem;
	color: var(--c-muted);
}

/* Row-style listing — clean rows, hover ring, file icon, download CTA */
/* Two-column layout: sidebar (filters) + main (toolbar/cats/grid). The
   --lib-sticky-top variable is the y-offset for sticky elements — it sits
   just below the site header (sticky at top: 0, ~80px tall when scrolled). */
.elyon-library__inner--with-sidebar {
	--lib-sticky-top: 88px;
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--s-5);
	align-items: start;
}

/* Sidebar — flows with the page as the user scrolls (no sticky behaviour). */
.elyon-library__sidebar {
	align-self: start;
	padding: 18px;
	background: #fff;
	border: 1.5px solid #dadce0;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.elyon-library__sidebar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding-bottom: 14px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--c-border);
}
.elyon-library__sidebar-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: var(--ff-sans);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--c-text);
	letter-spacing: 0;
	text-transform: none;
}
.elyon-library__sidebar-title::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background-color: var(--c-primary);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/></svg>") center / contain no-repeat;
}
.elyon-library__sidebar-reset {
	background: none;
	border: 0;
	padding: 4px 10px;
	font: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--c-primary);
	background-color: transparent;
	border-radius: var(--r-pill);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--t), color var(--t);
}
.elyon-library__sidebar-reset:hover {
	background-color: var(--c-primary-soft);
	color: var(--c-primary);
}

.elyon-library__facet + .elyon-library__facet {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--c-border);
}
.elyon-library__facet-title {
	margin: 0 0 10px;
	font-family: var(--ff-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-primary);
}
.elyon-library__facet-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
/* Multi-column variant — used by long lists like Class (P.1–P.7 + Top Class)
   so 8 items take 4 vertical rows instead of 8. */
.elyon-library__facet-list--grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 2px 6px;
}
.elyon-library__facet-list--grid .elyon-library__facet-item {
	padding: 7px 8px;
	gap: 8px;
}

/* Compact dropdown facet (used by Class, Term) — far shorter than a checkbox
   list, with the count rendered inline in each <option> so users still see
   "P.5 (4)" as they pick. */
.elyon-library__select-wrap {
	position: relative;
}
.elyon-library__select-wrap::after {
	content: '';
	position: absolute;
	right: 14px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--c-primary);
	border-bottom: 2px solid var(--c-primary);
	transform: translateY(-65%) rotate(45deg);
	pointer-events: none;
}
.elyon-library__select {
	width: 100%;
	height: 38px;
	padding: 0 32px 0 12px;
	border: 1.5px solid #dadce0;
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: 1rem;                  /* 16px — prevent iOS Safari focus auto-zoom */
	color: var(--c-text);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	transition: border-color var(--t), box-shadow var(--t);
}
.elyon-library__select:hover { border-color: var(--c-primary); }
.elyon-library__select:focus {
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(135, 48, 42, 0.15);
	outline: 0;
}
/* When a class/term is actively filtered, give the select a brand-tinted
   look so the user sees "this filter is on". JS toggles .is-active. */
.elyon-library__select.is-active {
	border-color: var(--c-primary);
	background: var(--c-primary-soft);
	color: var(--c-primary);
	font-weight: 600;
}
.elyon-library__facet-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	border-radius: 8px;
	font-size: 0.8125rem;
	color: var(--c-text);
	cursor: pointer;
	transition: background-color var(--t);
}
.elyon-library__facet-item:hover { background: var(--c-primary-soft); }

/* Custom-styled checkbox — replaces the browser default with a proper
   rounded square that turns brick-red when checked. */
.elyon-library__facet-item input[type="checkbox"] {
	flex-shrink: 0;
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1.5px solid #C8A29C;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	position: relative;
	transition: background-color var(--t), border-color var(--t);
}
.elyon-library__facet-item input[type="checkbox"]:hover {
	border-color: var(--c-primary);
}
.elyon-library__facet-item input[type="checkbox"]:checked {
	background-color: var(--c-primary);
	border-color: var(--c-primary);
}
.elyon-library__facet-item input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.elyon-library__facet-item input[type="checkbox"]:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px rgba(135, 48, 42, 0.18);
}

/* Custom-styled radio — same visual rhythm as the checkbox, just round and
   with a centred dot when selected. Used by the Category facet only. */
.elyon-library__facet-item input[type="radio"] {
	flex-shrink: 0;
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1.5px solid #C8A29C;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	position: relative;
	transition: border-color var(--t);
}
.elyon-library__facet-item input[type="radio"]:hover {
	border-color: var(--c-primary);
}
.elyon-library__facet-item input[type="radio"]:checked {
	border-color: var(--c-primary);
}
.elyon-library__facet-item input[type="radio"]:checked::after {
	content: '';
	position: absolute;
	left: 3px;
	top: 3px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-primary);
}
.elyon-library__facet-item input[type="radio"]:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px rgba(135, 48, 42, 0.18);
}

.elyon-library__facet-item:has( input:checked ) {
	background: var(--c-primary-soft);
	color: var(--c-primary);
	font-weight: 600;
}
.elyon-library__facet-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Count badge — pill-shaped, neutral at rest, tinted in selected state. */
.elyon-library__facet-count {
	flex-shrink: 0;
	min-width: 22px;
	padding: 2px 8px;
	background: var(--c-cream, #f5f5f5);
	color: var(--c-muted);
	border-radius: var(--r-pill);
	text-align: center;
	font-size: 0.6875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: background-color var(--t), color var(--t);
}
.elyon-library__facet-item:has( input:checked ) .elyon-library__facet-count {
	background: #fff;
	color: var(--c-primary);
}

/* Stack the layout on small screens — sidebar sits above the main column. */
@media (max-width: 900px) {
	.elyon-library__inner--with-sidebar {
		grid-template-columns: 1fr;
	}
	.elyon-library__sidebar {
		position: static;
	}
}

/* Responsive grid — auto-fits 3–4 cards on a desktop content row, 2 on tablet,
   1 on phone. The `min(100%, 240px)` floor stops the card-min-width from
   overflowing very narrow viewports (240px) where 250px would push out. */
.elyon-library__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min(100%, 240px), 1fr ) );
	gap: var(--s-3);
}
.elyon-library__grid[hidden] { display: none; }

.elyon-library__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px 16px;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.elyon-library__item.is-hidden { display: none; }
.elyon-library__item:hover {
	border-color: var(--c-primary);
	transform: translateY(-1px);
	box-shadow: 0 4px 16px -8px rgba(135, 48, 42, 0.18);
}

/* Header row of each card: file-type icon (left) + category chip (right).
   Both are border-only — fills are reserved for the active hover state. */
.elyon-library__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 4px;
}
/* File-type chip — no background, just the icon + label rendered in the
   file's official brand colour. PDF red, Word blue, Excel green, etc. */
.elyon-library__file-icon {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0;
	background: transparent;
	color: #6B7280;
}
.elyon-library__file-type {
	font-family: var(--ff-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: inherit;
	text-transform: uppercase;
}

/* Per-type official colours applied via the <li>'s data-filetype attribute. */
[data-filetype="PDF"]  .elyon-library__file-icon { color: #DC2626; }

[data-filetype="DOC"]  .elyon-library__file-icon,
[data-filetype="DOCX"] .elyon-library__file-icon,
[data-filetype="ODT"]  .elyon-library__file-icon,
[data-filetype="RTF"]  .elyon-library__file-icon { color: #2B579A; }

[data-filetype="XLS"]  .elyon-library__file-icon,
[data-filetype="XLSX"] .elyon-library__file-icon,
[data-filetype="CSV"]  .elyon-library__file-icon,
[data-filetype="ODS"]  .elyon-library__file-icon { color: #217346; }

[data-filetype="PPT"]  .elyon-library__file-icon,
[data-filetype="PPTX"] .elyon-library__file-icon,
[data-filetype="ODP"]  .elyon-library__file-icon,
[data-filetype="KEY"]  .elyon-library__file-icon { color: #B7472A; }

[data-filetype="JPG"]  .elyon-library__file-icon,
[data-filetype="JPEG"] .elyon-library__file-icon,
[data-filetype="PNG"]  .elyon-library__file-icon,
[data-filetype="WEBP"] .elyon-library__file-icon,
[data-filetype="GIF"]  .elyon-library__file-icon,
[data-filetype="SVG"]  .elyon-library__file-icon { color: #7C3AED; }

[data-filetype="ZIP"]  .elyon-library__file-icon,
[data-filetype="RAR"]  .elyon-library__file-icon,
[data-filetype="7Z"]   .elyon-library__file-icon,
[data-filetype="TAR"]  .elyon-library__file-icon,
[data-filetype="GZ"]   .elyon-library__file-icon { color: #475569; }

[data-filetype="MP3"]  .elyon-library__file-icon,
[data-filetype="WAV"]  .elyon-library__file-icon,
[data-filetype="M4A"]  .elyon-library__file-icon,
[data-filetype="OGG"]  .elyon-library__file-icon { color: #C2410C; }

[data-filetype="MP4"]  .elyon-library__file-icon,
[data-filetype="MOV"]  .elyon-library__file-icon,
[data-filetype="AVI"]  .elyon-library__file-icon,
[data-filetype="MKV"]  .elyon-library__file-icon,
[data-filetype="WEBM"] .elyon-library__file-icon { color: #0891B2; }

/* Compact title — small but firm, like the screenshot reference */
.elyon-library__title {
	margin: 0;
	font-family: var(--ff-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.005em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.elyon-library__title a {
	color: var(--c-text);
	text-decoration: none;
	transition: color var(--t);
}
.elyon-library__title a:hover,
.elyon-library__title a:focus-visible {
	color: var(--c-primary-text);
	text-decoration: underline;
	text-underline-offset: 2px;
	outline: 0;
}
.elyon-library__excerpt {
	margin: 0;
	color: var(--c-muted);
	font-size: 0.9375rem;        /* 15px — slight bump from 13 for readability */
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.elyon-library__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 0;
	font-size: 0.75rem;
	color: var(--c-muted);
	align-items: center;
}
.elyon-library__meta > span {
	display: inline-flex;
	align-items: center;
}
.elyon-library__meta > span + span::before {
	content: "·";
	margin-right: 10px;
	color: var(--c-border);
}
/* Category chip — muted-grey outline + text (#6b6b6b). Reads as quiet
   metadata, doesn't compete with the brand accent. */
.elyon-library__chip {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border: 1.5px solid #6b6b6b;
	color: #6b6b6b;
	background: transparent;
	border-radius: var(--r-pill);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Footer: download CTA pinned to bottom of card via margin-top:auto */
.elyon-library__action {
	margin-top: auto;
	padding-top: 8px;
}
.elyon-library__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--c-primary);
	color: #fff;
	border: 1px solid var(--c-primary);
	border-radius: var(--r-sm, 6px);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--t), border-color var(--t);
}
.elyon-library__btn:hover,
.elyon-library__btn:focus-visible {
	background: #7F2C23;
	border-color: #7F2C23;
	color: #fff;
}
.elyon-library__pending {
	display: inline-block;
	width: 100%;
	text-align: center;
	padding: 8px 12px;
	font-size: 0.75rem;
	color: var(--c-muted);
	font-style: italic;
	border: 1px dashed var(--c-border);
	border-radius: var(--r-sm, 6px);
}

/* Load more button — centred under the grid, hidden by JS when there's
   nothing left to reveal. */
.elyon-library__load-more-wrap {
	display: flex;
	justify-content: center;
	margin: var(--s-5) 0 var(--s-4);
}
.elyon-library__load-more-wrap[hidden] { display: none; }
.elyon-library__load-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	background: #fff;
	color: var(--c-primary);
	border: 1.5px solid var(--c-primary);
	border-radius: var(--r-pill);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--t), color var(--t), transform var(--t);
}
.elyon-library__load-more:hover,
.elyon-library__load-more:focus-visible {
	background: var(--c-primary);
	color: #fff;
	transform: translateY(-1px);
	outline: 0;
}
.elyon-library__load-more-rest {
	font-weight: 400;
	opacity: 0.85;
}

/* Empty state */
.elyon-library__empty {
	max-width: 460px;
	margin: var(--s-6) auto;
	padding: var(--s-7) var(--s-5);
	text-align: center;
	color: var(--c-muted);
}
.elyon-library__empty[hidden] { display: none; }
.elyon-library__empty svg {
	color: var(--c-border-strong);
	margin: 0 auto var(--s-4);
	display: block;
}
.elyon-library__empty h3 {
	margin: 0 0 var(--s-2);
	font-family: var(--ff-display);
	font-size: 1.25rem;
	color: var(--c-text);
}
.elyon-library__empty p { margin: 0 0 var(--s-3); }
.elyon-library__empty .elyon-link {
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
	font: inherit;
	color: var(--c-primary);
	text-decoration: underline;
}

/* Responsive: tighter layout + stacked toolbar on small screens */
@media (max-width: 720px) {
	.elyon-library__toolbar {
		grid-template-columns: 1fr;
	}
	.elyon-library__sort select { width: 100%; }
	.elyon-library__grid {
		grid-template-columns: 1fr;
	}
}

/* Narrow phones — 480px and below */
@media (max-width: 480px) {
	.elyon-library__inner {
		gap: var(--s-3);
	}
	.elyon-library__sidebar {
		padding: 14px;
	}
	.elyon-library__cats {
		gap: 6px;
	}
	.elyon-library__cat {
		padding: 6px 12px;
		font-size: 0.8125rem;
	}
	.elyon-library__item {
		padding: 12px 14px 14px;
	}
	.elyon-library__title { font-size: 0.875rem; }
	.elyon-library__excerpt { font-size: 0.75rem; }
	.elyon-library__meta { font-size: 0.6875rem; }
	.elyon-library__btn {
		padding: 6px 10px;
		font-size: 0.75rem;
	}
	.elyon-library__chip {
		font-size: 0.5625rem;
		padding: 1px 6px;
	}
	.elyon-library__file-icon {
		gap: 4px;
		padding: 3px 7px;
	}
}

/* Smallest target — 320px and below (down to 240px). Tightens every
   container's horizontal breathing room so chips/buttons don't overflow. */
@media (max-width: 360px) {
	.elyon-library__sidebar { padding: 12px; }
	.elyon-library__sidebar-head {
		padding-bottom: 10px;
		margin-bottom: 12px;
	}
	.elyon-library__facet-list--grid {
		grid-template-columns: 1fr;   /* fall back to single column when there's no width for two */
	}
	.elyon-library__item {
		padding: 10px 12px 12px;
	}
	.elyon-library__card-head {
		flex-wrap: wrap;
	}
	.elyon-library__action {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}
	.elyon-library__btn { width: 100%; justify-content: center; }
	/* keep select at 1rem on mobile too — iOS auto-zooms below 16px */
}

/* ============================================================
   SINGLE DOWNLOAD — file viewer page
   ============================================================ */

.elyon-doc {
	background: #FAFAFA;
	min-height: 100vh;
}

/* Header — sticky-ish slab with back link, title block, download CTA */
.elyon-doc__header {
	background: #fff;
	border-bottom: 1px solid var(--c-border);
}
.elyon-doc__header-inner {
	max-width: var(--w-wide);
	margin-inline: auto;
	padding: clamp(var(--s-7), 7vw, var(--s-9)) var(--pad-edge) clamp(var(--s-6), 6vw, var(--s-8));
}
.elyon-doc__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: var(--s-3);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--c-muted);
	text-decoration: none;
	transition: color var(--t);
}
.elyon-doc__back:hover,
.elyon-doc__back:focus-visible {
	color: var(--c-primary);
	outline: 0;
}
.elyon-doc__title-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--s-4);
}
.elyon-doc__file-icon {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	color: #6B7280;
}
[data-filetype="PDF"]   .elyon-doc__file-icon { color: #DC2626; }
[data-filetype="DOC"]   .elyon-doc__file-icon,
[data-filetype="DOCX"]  .elyon-doc__file-icon { color: #2B579A; }
[data-filetype="XLS"]   .elyon-doc__file-icon,
[data-filetype="XLSX"]  .elyon-doc__file-icon,
[data-filetype="CSV"]   .elyon-doc__file-icon { color: #217346; }
[data-filetype="PPT"]   .elyon-doc__file-icon,
[data-filetype="PPTX"]  .elyon-doc__file-icon { color: #B7472A; }
[data-filetype="JPG"]   .elyon-doc__file-icon,
[data-filetype="JPEG"]  .elyon-doc__file-icon,
[data-filetype="PNG"]   .elyon-doc__file-icon,
[data-filetype="WEBP"]  .elyon-doc__file-icon,
[data-filetype="GIF"]   .elyon-doc__file-icon { color: #7C3AED; }
.elyon-doc__file-type {
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.elyon-doc__title-block {
	min-width: 0;
}
.elyon-doc__title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp( 1.25rem, 2.4vw, 1.625rem );
	font-weight: 500;
	color: var(--c-text);
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.elyon-doc__meta {
	margin: 6px 0 0;
	font-size: 0.8125rem;
	color: var(--c-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	align-items: center;
}
.elyon-doc__meta-sep { color: var(--c-border-strong, #c9c9c9); font-weight: 700; }
.elyon-doc__actions { display: flex; gap: 8px; flex-shrink: 0; }
.elyon-doc__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	font-size: 0.875rem;
	font-weight: 600;
	border-radius: var(--r-pill);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--t), border-color var(--t), color var(--t);
}
.elyon-doc__btn--primary {
	background: var(--c-primary);
	color: #fff;
	border: 1.5px solid var(--c-primary);
}
.elyon-doc__btn--primary:hover,
.elyon-doc__btn--primary:focus-visible {
	background: #7F2C23;
	border-color: #7F2C23;
	color: #fff;
	outline: 0;
}

/* Body — two-column layout: sidebar (left) + viewer (main). Standard
   site-wide top/bottom padding so it doesn't sit flush against the header. */
.elyon-doc__body {
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: clamp(var(--s-5), 5vw, var(--s-7)) var(--pad-edge) clamp(var(--s-6), 6vw, var(--s-8));
}
.elyon-doc__body-inner {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: var(--s-5);
	align-items: start;
}
.elyon-doc__main { min-width: 0; }

/* Sidebar — left, sticky, multi-panel. */
.elyon-doc__sidebar {
	position: sticky;
	top: 88px;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.elyon-doc__panel {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	padding: 18px;
}
.elyon-doc__panel-title {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
	padding-bottom: 10px;
	font-family: var(--ff-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-primary);
	border-bottom: 1px solid var(--c-border);
}
.elyon-doc__panel-title svg { flex-shrink: 0; }

/* Filters panel — the prominent "deep-link back to library" CTA stack.
   Each chip is a one-tap shortcut to the library, pre-filtered. */
.elyon-doc__panel--filters {
	background: linear-gradient(180deg, #fff 0%, var(--c-primary-soft) 100%);
}
.elyon-doc__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.elyon-doc__chip {
	display: grid;
	grid-template-columns: 22px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: 8px;
	color: var(--c-text);
	text-decoration: none;
	transition: border-color var(--t), background-color var(--t), transform var(--t), box-shadow var(--t);
}
.elyon-doc__chip:hover,
.elyon-doc__chip:focus-visible {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
	transform: translateX(2px);
	box-shadow: 0 4px 14px -8px rgba(135, 48, 42, 0.45);
	outline: 0;
}
.elyon-doc__chip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--c-primary);
	transition: color var(--t);
}
.elyon-doc__chip:hover .elyon-doc__chip-icon,
.elyon-doc__chip:focus-visible .elyon-doc__chip-icon {
	color: #fff;
}
.elyon-doc__chip-label {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-muted);
	transition: color var(--t);
	grid-column: 2;
	grid-row: 1;
	line-height: 1;
	margin-bottom: 2px;
}
.elyon-doc__chip:hover .elyon-doc__chip-label,
.elyon-doc__chip:focus-visible .elyon-doc__chip-label {
	color: rgba(255, 255, 255, 0.78);
}
.elyon-doc__chip-value {
	font-size: 0.875rem;
	font-weight: 600;
	color: inherit;
	grid-column: 2;
	grid-row: 2;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.elyon-doc__chip-icon { grid-column: 1; grid-row: 1 / 3; }
.elyon-doc__chip-arrow {
	grid-column: 3;
	grid-row: 1 / 3;
	display: inline-flex;
	align-items: center;
	color: var(--c-muted);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity var(--t), transform var(--t);
}
.elyon-doc__chip:hover .elyon-doc__chip-arrow,
.elyon-doc__chip:focus-visible .elyon-doc__chip-arrow {
	color: #fff;
	opacity: 1;
	transform: translateX(0);
}

/* "See all in {category}" footer link below the related list */
.elyon-doc__see-all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--c-border);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--c-primary);
	text-decoration: none;
	transition: color var(--t), gap var(--t);
}
.elyon-doc__see-all:hover,
.elyon-doc__see-all:focus-visible {
	color: #7F2C23;
	gap: 8px;
	outline: 0;
}
.elyon-doc__panel-body {
	font-size: 0.875rem;
	color: var(--c-text);
	line-height: 1.6;
}
.elyon-doc__panel-body p:first-child { margin-top: 0; }
.elyon-doc__panel-body p:last-child  { margin-bottom: 0; }

/* Details list — definition pairs ("Format → PDF"). The values that map to
   library filters are clickable and link back to the library page filtered. */
.elyon-doc__details {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 8px 12px;
	margin: 0;
	font-size: 0.8125rem;
}
.elyon-doc__details dt {
	font-weight: 600;
	color: var(--c-muted);
	text-transform: uppercase;
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	align-self: center;
}
.elyon-doc__details dd {
	margin: 0;
	color: var(--c-text);
	font-weight: 500;
	text-align: right;
}
.elyon-doc__filter-link {
	display: inline-block;
	padding: 3px 10px;
	background: var(--c-primary-soft);
	color: var(--c-primary);
	border-radius: var(--r-pill);
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--t), color var(--t);
}
.elyon-doc__filter-link:hover,
.elyon-doc__filter-link:focus-visible {
	background: var(--c-primary);
	color: #fff;
	outline: 0;
}

/* Related resources — compact list with file-type chip + title */
.elyon-doc__related {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.elyon-doc__related-item + .elyon-doc__related-item {
	border-top: 1px solid var(--c-border);
}
.elyon-doc__related-link {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	color: var(--c-text);
	text-decoration: none;
	transition: color var(--t);
}
.elyon-doc__related-link:hover,
.elyon-doc__related-link:focus-visible {
	color: var(--c-primary);
	outline: 0;
}
.elyon-doc__related-type {
	flex-shrink: 0;
	min-width: 36px;
	padding: 2px 7px;
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	border-radius: 3px;
	background: #6B7280;
	color: #fff;
	margin-top: 1px;
}
[data-filetype="PDF"]  .elyon-doc__related-type { background: #DC2626; }
[data-filetype="DOC"]  .elyon-doc__related-type,
[data-filetype="DOCX"] .elyon-doc__related-type { background: #2B579A; }
[data-filetype="XLS"]  .elyon-doc__related-type,
[data-filetype="XLSX"] .elyon-doc__related-type,
[data-filetype="CSV"]  .elyon-doc__related-type { background: #217346; }
[data-filetype="PPT"]  .elyon-doc__related-type,
[data-filetype="PPTX"] .elyon-doc__related-type { background: #B7472A; }
[data-filetype="JPG"]  .elyon-doc__related-type,
[data-filetype="PNG"]  .elyon-doc__related-type,
[data-filetype="JPEG"] .elyon-doc__related-type,
[data-filetype="WEBP"] .elyon-doc__related-type,
[data-filetype="GIF"]  .elyon-doc__related-type { background: #7C3AED; }
.elyon-doc__related-title {
	flex: 1;
	min-width: 0;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.elyon-doc__viewer {
	display: block;
	width: 100%;
	height: clamp(380px, 55vh, 620px);
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	box-shadow: 0 4px 18px -10px rgba(0, 0, 0, 0.12);
}
.elyon-doc__viewer--pdf,
.elyon-doc__viewer--office {
	border: 0;
}
.elyon-doc__viewer--image {
	height: auto;
	max-height: 60vh;
	object-fit: contain;
	background: #fff;
}
.elyon-doc__viewer--video {
	height: auto;
	max-height: 60vh;
	background: #000;
}
.elyon-doc__viewer--audio {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--s-7) var(--s-4);
	height: auto;
	min-height: 0;
}
.elyon-doc__viewer--audio audio { width: 100%; max-width: 520px; }

/* Action bar — sits directly under the preview. Holds the user-rating
   widget on the left and the primary Download CTA on the right. */
.elyon-doc__actionbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	margin-top: var(--s-4);
	padding: var(--s-4);
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
}
.elyon-doc__rating {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.elyon-doc__rating-summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
}
.elyon-doc__rating-score {
	font-weight: 700;
	font-size: 1rem;
	color: var(--c-text);
	font-variant-numeric: tabular-nums;
	min-width: 28px;
}
.elyon-doc__rating-stars {
	display: inline-flex;
	gap: 2px;
	color: #dadce0;
}
.elyon-doc__rating-star {
	position: relative;
	width: 18px;
	height: 18px;
	display: inline-block;
}
.elyon-doc__rating-star svg {
	position: absolute;
	inset: 0;
}
.elyon-doc__rating-star-fill {
	position: absolute;
	inset: 0;
	overflow: hidden;
	color: #F59E0B;
	width: 0;
}
.elyon-doc__rating-count {
	color: var(--c-muted);
	font-size: 0.8125rem;
}

.elyon-doc__rating-prompt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	color: var(--c-muted);
}
.elyon-doc__rating-prompt-label { white-space: nowrap; }

.elyon-doc__rating-input {
	display: inline-flex;
	gap: 1px;
}
.elyon-doc__rating-input-star {
	background: none;
	border: 0;
	padding: 2px;
	cursor: pointer;
	color: #dadce0;
	transition: color var(--t), transform var(--t);
}
.elyon-doc__rating-input-star:hover,
.elyon-doc__rating-input-star.is-hover {
	color: #F59E0B;
	transform: scale(1.05);
}
/* When user hovers a star, fill it (and every star to its left) — pure CSS */
.elyon-doc__rating-input-star:hover ~ .elyon-doc__rating-input-star { color: #dadce0; }
.elyon-doc__rating-input:hover .elyon-doc__rating-input-star { color: #F59E0B; }
.elyon-doc__rating-input .elyon-doc__rating-input-star:hover ~ .elyon-doc__rating-input-star { color: #dadce0; }
.elyon-doc__rating-input-star[disabled] {
	cursor: default;
	opacity: 0.5;
}
.elyon-doc__rating-input-star svg { display: block; fill: currentColor; stroke: currentColor; }

/* Download CTA at "large" size — used in the action bar */
.elyon-doc__btn--lg {
	padding: 12px 26px;
	font-size: 0.9375rem;
}

/* Graceful fallback when no preview is possible */
.elyon-doc__viewer--none {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: var(--s-7) var(--s-4);
	height: auto;
	min-height: 280px;
	color: var(--c-muted);
	text-align: center;
}
.elyon-doc__viewer--none svg { color: var(--c-border-strong, #c9c9c9); margin-bottom: 4px; }
.elyon-doc__viewer--none h3 {
	margin: 0;
	font-family: var(--ff-display);
	font-size: 1.125rem;
	color: var(--c-text);
	font-weight: 500;
}
.elyon-doc__viewer--none p { margin: 0; max-width: 380px; font-size: 0.875rem; }

/* Tablet — collapse to single column, sidebar drops below the viewer */
@media (max-width: 1024px) {
	.elyon-doc__body-inner {
		grid-template-columns: 1fr;
	}
	.elyon-doc__sidebar {
		position: static;
		max-height: none;
		overflow: visible;
		order: 2;
	}
	.elyon-doc__main {
		order: 1;
	}
}

/* Mobile — stack the title row, full-width download CTA */
@media (max-width: 720px) {
	.elyon-doc__title-row {
		grid-template-columns: 1fr;
	}
	.elyon-doc__file-icon { flex-direction: row; }
	.elyon-doc__actions { width: 100%; }
	.elyon-doc__btn { flex: 1; justify-content: center; }
	.elyon-doc__viewer { height: clamp(320px, 50vh, 480px); }
	.elyon-doc__details dd { text-align: left; }
	.elyon-doc__actionbar {
		flex-direction: column;
		align-items: stretch;
	}
	.elyon-doc__btn--lg { width: 100%; justify-content: center; }
}

/* Narrow phones — 480px and below */
@media (max-width: 480px) {
	.elyon-doc__header-inner {
		padding: var(--s-3) var(--pad-edge);
	}
	.elyon-doc__title { font-size: 1.125rem; }
	.elyon-doc__meta { font-size: 0.75rem; }
	.elyon-doc__actionbar {
		padding: var(--s-3);
		gap: var(--s-3);
	}
	.elyon-doc__rating-summary { flex-wrap: wrap; }
	.elyon-doc__rating-prompt { flex-wrap: wrap; }
	.elyon-doc__panel { padding: 14px; }
	.elyon-doc__chip { padding: 8px 10px; gap: 8px; }
	.elyon-doc__chip-value { font-size: 0.8125rem; }
	.elyon-doc__related-link { padding: 8px 0; gap: 8px; }
	.elyon-doc__related-title { font-size: 0.75rem; }
	.elyon-doc__viewer { height: clamp(280px, 45vh, 380px); }
}

/* Smallest target — 320px and below (down to 240px) */
@media (max-width: 360px) {
	.elyon-doc__back { font-size: 0.75rem; }
	.elyon-doc__title { font-size: 1rem; line-height: 1.3; }
	.elyon-doc__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		font-size: 0.6875rem;
	}
	.elyon-doc__meta-sep { display: none; }   /* dots make no sense in a column */
	.elyon-doc__file-icon svg { width: 24px; height: 24px; }
	.elyon-doc__panel { padding: 12px; }
	.elyon-doc__panel-title { font-size: 0.625rem; }
	.elyon-doc__chip { grid-template-columns: 18px 1fr auto; padding: 7px 10px; }
	.elyon-doc__chip-icon svg { width: 12px; height: 12px; }
	.elyon-doc__chip-value { font-size: 0.75rem; }
	.elyon-doc__rating { width: 100%; }
	.elyon-doc__rating-input-star svg { width: 18px; height: 18px; }
	.elyon-doc__viewer { height: clamp(240px, 42vh, 320px); }
	.elyon-doc__see-all { font-size: 0.75rem; }
	.elyon-doc__details {
		grid-template-columns: 1fr;
		gap: 4px 0;
	}
	.elyon-doc__details dt { margin-top: 8px; }
}

/* ============================================================
   BLOG — modern photo-led editorial layout (home.php · archive.php)
   ============================================================ */

.elyon-blog {
	background: var(--c-bg);
}

/* Page header — eyebrow · big serif title · kicker
   (vertical padding matches .elyon-page-hero so every page header
   shares the same rhythm site-wide) */
.elyon-blog__header {
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: clamp(var(--s-7), 7vw, var(--s-9)) var(--pad-edge) clamp(var(--s-6), 6vw, var(--s-8));
	text-align: center;
}
.elyon-blog__header-inner {
	max-width: var(--w-prose);
	margin: 0 auto;
}
.elyon-blog__eyebrow {
	margin: 0 0 var(--s-3);
	font-family: var(--ff-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-primary);
}
.elyon-blog__title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp( 2rem, 5vw, 3.25rem );
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--c-text);
}
.elyon-blog__kicker {
	margin: var(--s-3) 0 0;
	font-size: clamp( 1rem, 1.6vw, 1.125rem );
	color: var(--c-muted);
	line-height: 1.55;
}

/* Category pills strip — scrolls horizontally on overflow */
.elyon-blog__filters {
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: 0 var(--pad-edge);
	border-bottom: 1px solid var(--c-border);
}
.elyon-blog__filters-inner {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: var(--s-2);
	overflow-x: auto;
	scrollbar-width: thin;
	padding-bottom: var(--s-1);
}
.elyon-blog__filter {
	flex-shrink: 0;
	padding: var(--s-3) var(--s-5);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--c-muted);
	text-decoration: none;
	transition: color var(--t);
	white-space: nowrap;
}
.elyon-blog__filter:hover,
.elyon-blog__filter:focus-visible {
	color: var(--c-text);
	outline: 0;
}
.elyon-blog__filter.is-active {
	color: var(--c-primary);
	font-weight: 700;
}

/* Featured (latest) story — magazine-style hero card with photo on the
   left and a tall title block on the right at desktop, stacks at tablet. */
.elyon-blog__featured-wrap {
	max-width: var(--w-wide);
	margin: clamp(var(--s-5), 5vw, var(--s-7)) auto 0;
	padding: 0 var(--pad-edge);
}
.elyon-blog__featured {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(var(--s-4), 4vw, var(--s-6));
	align-items: center;
}
@media (min-width: 720px) {
	.elyon-blog__featured {
		grid-template-columns: 1.4fr 1fr;
	}
}
.elyon-blog__featured-media {
	display: block;
	overflow: hidden;
	border-radius: var(--r-md);
	aspect-ratio: 16 / 10;
	background: var(--c-cream);
}
.elyon-blog__featured-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}
.elyon-blog__featured-media:hover img,
.elyon-blog__featured-media:focus-visible img {
	transform: scale(1.03);
}
.elyon-blog__featured-body { min-width: 0; }
.elyon-blog__featured-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	margin: 0 0 var(--s-3);
	font-family: var(--ff-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.elyon-blog__featured-flag {
	background: var(--c-primary);
	color: #fff;
	padding: var(--s-1) var(--s-3);
	border-radius: var(--r-pill);
}
.elyon-blog__featured-sep { color: var(--c-border-strong, #c9c9c9); }
.elyon-blog__featured-cat {
	color: var(--c-primary);
	text-decoration: none;
	transition: color var(--t);
}
.elyon-blog__featured-cat:hover { color: #7F2C23; }
.elyon-blog__featured-title {
	margin: 0 0 var(--s-3);
	font-family: var(--ff-display);
	font-size: clamp( 1.5rem, 3vw, 2.25rem );
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
}
.elyon-blog__featured-title a {
	color: var(--c-text);
	text-decoration: none;
	transition: color var(--t);
}
.elyon-blog__featured-title a:hover,
.elyon-blog__featured-title a:focus-visible {
	color: var(--c-primary);
	outline: 0;
}
.elyon-blog__featured-excerpt {
	margin: 0 0 var(--s-3);
	color: var(--c-muted);
	font-size: 1rem;
	line-height: 1.6;
}
.elyon-blog__featured-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--s-2);
	margin: 0;
	font-size: 0.8125rem;
	color: var(--c-muted);
}

/* Card grid for the rest of the posts */
.elyon-blog__grid-wrap {
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: clamp(var(--s-6), 6vw, var(--s-8)) var(--pad-edge);
}
.elyon-blog__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( min(100%, 280px), 1fr ) );
	gap: clamp(var(--s-4), 3vw, var(--s-5));
}

/* Each post card — photo on top, body below. Includes opacity transition
   so the JS-driven filter feels smooth rather than abrupt. */
.elyon-blog__post {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--r-md);
	overflow: hidden;
	border: 1px solid #dadce0;
	transition: border-color var(--t), transform var(--t), box-shadow var(--t), opacity .25s ease;
}
.elyon-blog__post.is-hidden { display: none; }
.elyon-blog__featured-wrap[hidden] { display: none; }
.elyon-blog__post:hover {
	transform: translateY(-2px);
	border-color: #c9cdd2;
	box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.12);
}
.elyon-blog__post-media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--c-cream);
}
.elyon-blog__post-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}
.elyon-blog__post:hover .elyon-blog__post-media img {
	transform: scale(1.04);
}
.elyon-blog__post-body {
	padding: var(--s-4);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	flex: 1;
}
.elyon-blog__post-cat {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-primary);
	text-decoration: none;
	transition: color var(--t);
	align-self: flex-start;
}
.elyon-blog__post-cat:hover { color: #7F2C23; }
.elyon-blog__post-title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.005em;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.elyon-blog__post-title a {
	color: var(--c-text);
	text-decoration: none;
	transition: color var(--t);
}
.elyon-blog__post-title a:hover,
.elyon-blog__post-title a:focus-visible {
	color: var(--c-primary);
	outline: 0;
}
.elyon-blog__post-excerpt {
	margin: 0;
	color: var(--c-muted);
	font-size: 1rem;             /* 16px — card body floor */
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.elyon-blog__post-meta {
	margin: auto 0 0;
	padding-top: var(--s-2);
	font-size: 0.75rem;
	color: var(--c-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--s-2);
}

/* Empty state — shown by JS when a filter matches nothing. */
.elyon-blog__empty {
	margin: 0;
	padding: var(--s-7) var(--s-4);
	text-align: center;
	color: var(--c-muted);
	font-size: 0.9375rem;
}
.elyon-blog__empty[hidden] { display: none; }

/* Filter tabs are buttons (not anchors) when JS is active — strip the
   default browser button chrome. */
button.elyon-blog__filter {
	background: none;
	border: 0;
	font: inherit;
	cursor: pointer;
}

/* ============================================================
   SINGLE POST — modern editorial article (single.php)
   ============================================================ */

.elyon-article {
	background: var(--c-bg);
}
.elyon-article__shell { padding-bottom: clamp(var(--s-5), 5vw, var(--s-7)); }

/* Header band — matches .elyon-page-hero rhythm site-wide */
.elyon-article__header {
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: clamp(var(--s-7), 7vw, var(--s-9)) var(--pad-edge) clamp(var(--s-6), 6vw, var(--s-8));
	text-align: center;
}
.elyon-article__header-inner {
	max-width: var(--w-prose);
	margin: 0 auto;
}
.elyon-article__cat {
	margin: 0 0 var(--s-3);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.elyon-article__cat a {
	color: var(--c-primary);
	text-decoration: none;
	transition: color var(--t);
}
.elyon-article__cat a:hover { color: #7F2C23; }
.elyon-article__title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp( 1.875rem, 5vw, 3rem );
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--c-text);
}
.elyon-article__byline {
	margin: var(--s-4) 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--s-2);
	font-size: 0.875rem;
	color: var(--c-muted);
}
.elyon-article__author-line {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
}
.elyon-article__author-avatar {
	border-radius: 50%;
	display: block;
}

/* Hero photo — full-bleed up to wide */
.elyon-article__hero {
	max-width: var(--w-wide);
	margin: clamp(var(--s-4), 4vw, var(--s-5)) auto;
	padding: 0 var(--pad-edge);
}
.elyon-article__hero img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: cover;
	border-radius: var(--r-md);
	background: var(--c-cream);
}

/* Body — narrow centered prose column */
.elyon-article__body {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 var(--pad-edge);
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--c-text);
}

/* Footer — tags + share */
.elyon-article__footer {
	max-width: 720px;
	margin: clamp(var(--s-5), 5vw, var(--s-6)) auto 0;
	padding: var(--s-5) var(--pad-edge);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--s-3);
	border-top: 1px solid var(--c-border);
	border-bottom: 1px solid var(--c-border);
}
.elyon-article__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
}
.elyon-article__tags-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--c-muted);
	margin-right: var(--s-1);
}
.elyon-article__tag {
	display: inline-block;
	padding: var(--s-1) var(--s-3);
	background: var(--c-cream);
	color: var(--c-text);
	border-radius: var(--r-pill);
	font-size: 0.75rem;
	font-weight: 500;
	text-decoration: none;
	transition: background-color var(--t), color var(--t);
}
.elyon-article__tag:hover,
.elyon-article__tag:focus-visible {
	background: var(--c-primary);
	color: #fff;
	outline: 0;
}
.elyon-article__share {
	display: flex;
	align-items: center;
	gap: var(--s-2);
}
.elyon-article__share-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--c-muted);
	margin-right: var(--s-1);
}
.elyon-article__share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--c-cream);
	color: var(--c-text);
	text-decoration: none;
	transition: background-color var(--t), color var(--t), transform var(--t);
}
.elyon-article__share-btn:hover,
.elyon-article__share-btn:focus-visible {
	background: var(--c-primary);
	color: #fff;
	transform: translateY(-1px);
	outline: 0;
}
.elyon-article__share-btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* Author bio card */
.elyon-article__author-card {
	max-width: 720px;
	margin: clamp(var(--s-5), 5vw, var(--s-6)) auto 0;
	padding: var(--s-5) var(--pad-edge);
	display: flex;
	gap: var(--s-4);
	align-items: flex-start;
}
.elyon-article__author-avatar-img {
	border-radius: 50%;
	display: block;
}
.elyon-article__author-meta { flex: 1; min-width: 0; }
.elyon-article__author-name {
	margin: 0 0 var(--s-1);
	font-family: var(--ff-display);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--c-text);
}
.elyon-article__author-bio {
	margin: 0;
	color: var(--c-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Prev/next post nav */
.elyon-article__nav {
	max-width: var(--w-wide);
	margin: clamp(var(--s-6), 6vw, var(--s-7)) auto 0;
	padding: 0 var(--pad-edge);
}
.elyon-article__nav-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-3);
}
.elyon-article__nav-item {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	padding: var(--s-4);
	background: #fff;
	border: 1px solid #dadce0;
	border-radius: var(--r-md);
	text-decoration: none;
	transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.elyon-article__nav-item:hover,
.elyon-article__nav-item:focus-visible {
	border-color: var(--c-primary);
	box-shadow: 0 4px 16px -8px rgba(135, 48, 42, 0.18);
	transform: translateY(-1px);
	outline: 0;
}
.elyon-article__nav-item--next { text-align: right; }
.elyon-article__nav-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--c-primary);
	letter-spacing: 0.04em;
}
.elyon-article__nav-title {
	font-family: var(--ff-display);
	font-size: 1rem;
	font-weight: 500;
	color: var(--c-text);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Related posts strip */
.elyon-article__related {
	background: var(--c-cream);
	margin-top: clamp(var(--s-6), 6vw, var(--s-8));
	padding: clamp(var(--s-6), 6vw, var(--s-8)) 0;
}
.elyon-article__related-inner {
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: 0 var(--pad-edge);
}
.elyon-article__related-title {
	margin: 0 0 var(--s-5);
	font-family: var(--ff-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--c-text);
	text-align: center;
}

/* Tablet — featured story stacks (photo above body) */
@media (max-width: 900px) {
	.elyon-blog__featured {
		grid-template-columns: 1fr;
	}
	.elyon-blog__featured-media {
		aspect-ratio: 16 / 9;
	}
}

/* Phone landscape / small tablet */
@media (max-width: 720px) {
	.elyon-blog__filters {
		padding: 0 var(--s-3);
	}
	.elyon-blog__filter {
		padding: var(--s-3) var(--s-4);
		font-size: 0.8125rem;
	}
	.elyon-blog__featured-title { font-size: clamp( 1.375rem, 4vw, 1.75rem ); }
	.elyon-article__title    { font-size: clamp( 1.5rem, 6vw, 2.25rem ); }
	.elyon-article__hero img { max-height: 420px; }
	.elyon-article__footer {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s-3);
	}
	.elyon-article__nav-inner {
		grid-template-columns: 1fr;
	}
}

/* Narrow phones */
@media (max-width: 480px) {
	.elyon-blog__title   { font-size: clamp( 1.625rem, 7vw, 2rem ); }
	.elyon-blog__kicker  { font-size: 0.9375rem; }
	.elyon-blog__featured-wrap,
	.elyon-blog__grid-wrap {
		padding: var(--s-5) var(--pad-edge);
	}
	.elyon-blog__featured-excerpt { font-size: 0.9375rem; }
	.elyon-blog__post-title { font-size: 1rem; }
	.elyon-blog__post-body  { padding: var(--s-3); gap: var(--s-2); }
	.elyon-blog__post-excerpt { -webkit-line-clamp: 3; }

	.elyon-article__title    { font-size: clamp( 1.375rem, 7vw, 2rem ); }
	.elyon-article__hero img { max-height: 320px; }
	.elyon-article__body     { font-size: 1rem; line-height: 1.7; }
	.elyon-article__author-card { flex-direction: column; gap: var(--s-3); }
	.elyon-article__share-label,
	.elyon-article__tags-label { display: none; }
	.elyon-article__share-btn  { width: 32px; height: 32px; }
	.elyon-article__share-btn svg { width: 14px; height: 14px; }
}

/* Smallest target — 320px down to 240px */
@media (max-width: 360px) {
	.elyon-blog__filter { padding: var(--s-2) var(--s-3); }
	.elyon-blog__filters-inner { justify-content: flex-start; }
	.elyon-blog__featured-eyebrow { flex-wrap: wrap; gap: var(--s-1); }
	.elyon-blog__featured-title { font-size: 1.25rem; }
	.elyon-blog__featured-meta { font-size: 0.75rem; gap: 2px var(--s-2); }
	.elyon-blog__post-title { -webkit-line-clamp: 4; font-size: 0.9375rem; }
	.elyon-blog__post-cat { font-size: 0.625rem; }

	.elyon-article__header { padding: var(--s-4) var(--pad-edge); }
	.elyon-article__title  { font-size: 1.375rem; line-height: 1.2; }
	.elyon-article__cat    { font-size: 0.625rem; letter-spacing: 0.12em; }
	.elyon-article__byline {
		flex-direction: column;
		gap: var(--s-1);
		font-size: 0.8125rem;
	}
	.elyon-article__byline span[aria-hidden] { display: none; }   /* drop dot separators when stacked */
	.elyon-article__author-avatar { width: 22px; height: 22px; }
	.elyon-article__hero { padding: 0 var(--s-3); }
	.elyon-article__hero img { max-height: 240px; }
	.elyon-article__body {
		padding: 0 var(--s-3);
		font-size: 0.9375rem;
		line-height: 1.65;
	}
	.elyon-article__footer {
		padding: var(--s-4) var(--s-3);
		gap: var(--s-2);
	}
	.elyon-article__share { flex-wrap: wrap; }
	.elyon-article__author-card { padding: var(--s-4) var(--s-3); }
	.elyon-article__author-avatar-img { width: 56px; height: 56px; }
	.elyon-article__nav { padding: 0 var(--s-3); }
	.elyon-article__nav-item { padding: var(--s-3); }
	.elyon-article__nav-title { font-size: 0.875rem; -webkit-line-clamp: 3; }
	.elyon-article__related { padding: var(--s-5) 0; }
	.elyon-article__related-inner { padding: 0 var(--s-3); }
	.elyon-article__related-title { font-size: 1.25rem; margin-bottom: var(--s-4); }
}

/* ============================================================
   CONTACT PAGE — channels-first layout
   ============================================================ */

.elyon-contact-page { background: var(--c-bg); }

/* ----- Channels section ----- */
.elyon-channels {
	padding: clamp(var(--s-6), 6vw, var(--s-8)) var(--pad-edge);
	background: var(--c-bg);
}
.elyon-channels__inner {
	max-width: var(--w-wide);
	margin: 0 auto;
}
.elyon-channels__header {
	max-width: var(--w-prose);
	margin: 0 auto var(--s-5);
	text-align: center;
}
.elyon-channels__eyebrow {
	margin: 0 0 var(--s-2);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-primary);
}
.elyon-channels__title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--c-text);
}
.elyon-channels__lede {
	margin: var(--s-3) 0 0;
	color: var(--c-muted);
	font-size: 1rem;
	line-height: 1.55;
}

.elyon-channels__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax( min(100%, 300px), 1fr ));
	gap: clamp(var(--s-3), 2vw, var(--s-4));
}
.elyon-channel {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	padding: clamp(var(--s-4), 3vw, var(--s-5));
	background: #fff;
	border: 1px solid #dadce0;
	border-radius: 12px;
}

.elyon-channel__head {
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
}
.elyon-channel__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--c-primary-soft);
	color: var(--c-primary);
}
.elyon-channel__icon svg { width: 16px; height: 16px; }

.elyon-channel__label {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-muted);
}
/* Display value — bold + tabular nums so 0756 / 0757 line up vertically
   across cards. Sized down so the card stays compact. */
.elyon-channel__value {
	margin: var(--s-1) 0 0;
	font-family: var(--ff-sans);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--c-text);
	letter-spacing: -0.005em;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	word-break: break-word;
}
.elyon-channel__value a {
	color: inherit;
	text-decoration: none;
	transition: color var(--t);
}
.elyon-channel__value a:hover { color: var(--c-primary); }

.elyon-channel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin-top: auto;
}
.elyon-channel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1;
	min-width: 0;
	padding: 7px var(--s-3);
	border-radius: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--t), color var(--t), border-color var(--t);
}
.elyon-channel__btn svg { width: 12px; height: 12px; }
/* Channel actions — two-tier hierarchy matching the rest of the site.
   Primary is filled brand brick-red (same as every primary CTA elsewhere),
   secondary is neutral outlined. White on #87302A = 6.4:1 (AA), bricks
   on white inside the outlined hover = same. */
.elyon-channel__btn--primary {
	background: var(--c-primary);
	color: #fff;
	border: 1.5px solid var(--c-primary);
}
.elyon-channel__btn--primary:hover,
.elyon-channel__btn--primary:focus-visible {
	background: #7F2C23;
	border-color: #7F2C23;
	color: #fff;
	outline: 0;
}
.elyon-channel__btn--whatsapp {
	background: #fff;
	color: var(--c-text);
	border: 1.5px solid var(--c-text);
}
.elyon-channel__btn--whatsapp:hover,
.elyon-channel__btn--whatsapp:focus-visible {
	background: var(--c-text);
	color: #fff;
	border-color: var(--c-text);
	outline: 0;
}

/* ----- Form section ----- */
.elyon-contact-form-wrap {
	padding: clamp(var(--s-6), 6vw, var(--s-8)) var(--pad-edge);
	background: var(--c-cream);
}
.elyon-contact-form-wrap__inner {
	max-width: 640px;
	margin: 0 auto;
}
.elyon-contact-form-wrap__header {
	text-align: center;
	margin: 0 0 var(--s-5);
}
.elyon-contact-form-wrap__eyebrow {
	margin: 0 0 var(--s-2);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-primary);
}
.elyon-contact-form-wrap__title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp(1.5rem, 3.5vw, 2.125rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--c-text);
}
.elyon-contact-form-wrap__lede {
	margin: var(--s-3) 0 0;
	color: var(--c-muted);
	font-size: 0.9375rem;
}
.elyon-contact-form {
	background: #fff;
	border: 1px solid #dadce0;
	border-radius: var(--r-md);
	padding: clamp(var(--s-4), 4vw, var(--s-6));
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.elyon-contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-4);
}

/* ----- Visit (campus) cards ----- */
.elyon-visit {
	padding: clamp(var(--s-6), 6vw, var(--s-8)) var(--pad-edge);
	background: var(--c-bg);
}
.elyon-visit__inner {
	max-width: var(--w-wide);
	margin: 0 auto;
}
.elyon-visit__header {
	max-width: var(--w-prose);
	margin: 0 auto var(--s-5);
	text-align: center;
}
.elyon-visit__eyebrow {
	margin: 0 0 var(--s-2);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-primary);
}
.elyon-visit__title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--c-text);
}
.elyon-visit__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax( min(100%, 320px), 1fr ));
	gap: clamp(var(--s-4), 3vw, var(--s-5));
}
.elyon-visit-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #dadce0;
	border-radius: var(--r-md);
	overflow: hidden;
}
.elyon-visit-card__head {
	padding: var(--s-4) var(--s-5);
}
.elyon-visit-card__name {
	margin: 0;
	font-family: var(--ff-display);
	font-size: 1.375rem;
	font-weight: 500;
	color: var(--c-text);
	letter-spacing: -0.005em;
}
.elyon-visit-card__sub {
	margin: var(--s-2) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-1) var(--s-3);
	font-size: 0.875rem;
	color: var(--c-muted);
}
.elyon-visit-card__sub > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1.4;
}
.elyon-visit-card__sub svg {
	flex-shrink: 0;
	color: var(--c-primary);
}
.elyon-visit-card__map {
	aspect-ratio: 16 / 9;
	max-height: 320px;
	background: var(--c-cream);
	overflow: hidden;
}
.elyon-visit-card__map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.elyon-visit-card__directions {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	margin: 0;
	padding: var(--s-3) var(--s-4);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--c-text);
	background: #fff;
	text-decoration: none;
	border: 0;
	border-top: 1px solid #dadce0;
	transition: background-color var(--t), color var(--t);
}
.elyon-visit-card__directions svg { color: var(--c-primary); transition: color var(--t); }
.elyon-visit-card__directions:hover,
.elyon-visit-card__directions:focus-visible {
	background: var(--c-primary);
	color: #fff;
	outline: 0;
}
.elyon-visit-card__directions:hover svg,
.elyon-visit-card__directions:focus-visible svg { color: #fff; }

/* ----- Responsive — covers 240px to desktop ----- */

/* Tablet — 900px */
@media (max-width: 900px) {
	.elyon-channels__title,
	.elyon-visit__title { font-size: clamp(1.5rem, 4vw, 2rem); }
	.elyon-contact-form-wrap__title { font-size: clamp(1.375rem, 3.5vw, 1.875rem); }
}

/* Phone landscape / small tablet — 720px */
@media (max-width: 720px) {
	.elyon-channels,
	.elyon-contact-form-wrap,
	.elyon-visit {
		padding: clamp(var(--s-5), 5vw, var(--s-6)) var(--pad-edge);
	}
	.elyon-contact-form__row { grid-template-columns: 1fr; }
	.elyon-channels__lede,
	.elyon-contact-form-wrap__lede { font-size: 0.9375rem; }
	.elyon-visit-card__head { padding: var(--s-3) var(--s-4); }
	.elyon-visit-card__map { aspect-ratio: 16 / 10; max-height: 260px; }
}

/* Narrow phones — 480px */
@media (max-width: 480px) {
	.elyon-channel { padding: var(--s-4); gap: var(--s-3); }
	.elyon-channel__head { gap: var(--s-2); }
	.elyon-channel__value { font-size: 1.0625rem; }
	.elyon-channel__btn { padding: var(--s-2) var(--s-3); font-size: 0.75rem; }
	.elyon-channel__btn svg { width: 11px; height: 11px; }

	.elyon-contact-form { padding: var(--s-4); }
	.elyon-contact-form-wrap__inner { max-width: 100%; }

	.elyon-visit-card__head { padding: var(--s-3) var(--s-4); }
	.elyon-visit-card__name { font-size: 1.1875rem; }
	.elyon-visit-card__sub { font-size: 0.8125rem; gap: var(--s-1) var(--s-2); }
	.elyon-visit-card__map { max-height: 220px; }
	.elyon-visit-card__directions { padding: var(--s-3); font-size: 0.8125rem; }
}

/* Smallest target — 320px down to 240px */
@media (max-width: 360px) {
	.elyon-channels,
	.elyon-contact-form-wrap,
	.elyon-visit {
		padding: var(--s-5) var(--s-3);
	}
	.elyon-channels__header,
	.elyon-visit__header,
	.elyon-contact-form-wrap__header {
		margin-bottom: var(--s-4);
	}

	.elyon-channels__grid,
	.elyon-visit__grid {
		gap: var(--s-3);
	}

	.elyon-channel { padding: var(--s-3); }
	.elyon-channel__icon { width: 32px; height: 32px; border-radius: 6px; }
	.elyon-channel__icon svg { width: 14px; height: 14px; }
	.elyon-channel__label { font-size: 0.625rem; letter-spacing: 0.06em; }
	.elyon-channel__value { font-size: 1rem; }
	.elyon-channel__actions { flex-direction: column; }
	.elyon-channel__btn { width: 100%; padding: var(--s-2) var(--s-3); }

	.elyon-contact-form { padding: var(--s-3); gap: var(--s-3); }

	.elyon-visit-card__head { padding: var(--s-3); }
	.elyon-visit-card__name { font-size: 1.125rem; }
	.elyon-visit-card__sub { flex-direction: column; gap: var(--s-1); font-size: 0.8125rem; }
	.elyon-visit-card__map { aspect-ratio: 4 / 3; max-height: 200px; }
	.elyon-visit-card__directions { padding: var(--s-2) var(--s-3); }
}
