/* CHE theme styles — built from css/src (00-tokens.css 01-fonts.css 02-base.css 03-typography.css 04-layout.css 05-components.css 06-header.css 07-footer.css 08-hero.css 09-video.css 10-home.css 11-blog.css 12-page.css 13-motion.css 14-utilities.css), do not edit directly. */

/* ---- 00-tokens.css ---- */
/* ==========================================================================
   Design tokens — the single source of truth for colour, type, space, motion.
   Values come from the Figma homepage (1440px canvas); fluid sizes scale
   between a 375px phone and the 1440px design, then stop.
   ========================================================================== */
:root {
	/* --- Colour ------------------------------------------------------- */
	--c-cream: #F7F6EF;          /* page background */
	--c-cream-94: rgb(247 246 239 / .94);
	--c-mist: #EEF2EA;           /* pale green surface (institution) */
	--c-sage: #E5E9DF;           /* footer surface */
	--c-fig: #DCE3D4;            /* figure / image placeholder */
	--c-sand: #F2E8DE;           /* warm beige panel (student life) */
	--c-ink: #465A5A;            /* text + dark sections */
	--c-ink-70: rgb(70 90 90 / .7);
	--c-ink-50: rgb(70 90 90 / .5);
	--c-green: #5F7F40;          /* brand green */
	--c-green-deep: #4F6B34;
	--c-white: #FFFFFF;
	--c-white-70: rgb(255 255 255 / .7);
	--c-white-44: rgb(255 255 255 / .44);
	--c-line: rgb(70 90 90 / .208);
	--c-line-strong: #465A5A;
	--c-line-on-dark: rgb(255 255 255 / .314);
	--c-line-on-dark-2: rgb(255 255 255 / .44);
	--c-overlay-hero: linear-gradient(90deg, rgb(35 53 46 / .79) 0%, rgb(38 57 48 / .5) 50%, rgb(51 71 57 / .21) 100%);
	--c-overlay-media: linear-gradient(0deg, rgb(32 52 50 / .8) 0%, rgb(32 52 50 / 0) 70%);

	/* Aliases read by the CHE Forms plugin stylesheet */
	--color-primary: var(--c-green);
	--color-primary-dark: var(--c-green-deep);
	--color-text: var(--c-ink);
	--color-muted: var(--c-ink-70);
	--color-border: var(--c-line);
	--color-surface: var(--c-mist);

	/* Contextual colours (re-mapped on dark / green surfaces) */
	--fg: var(--c-ink);
	--fg-muted: var(--c-ink-70);
	--bg: var(--c-cream);
	--line: var(--c-line);
	--line-strong: var(--c-line-strong);
	--btn-bg: var(--c-green);
	--btn-fg: var(--c-white);

	/* --- Type ----------------------------------------------------------- */
	--ff: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-heading: var(--fw-light);   /* headlines + headings only */

	--fs-display: clamp(2.75rem, 2rem + 3.19vw, 4.875rem);      /* 78px hero */
	--fs-h1-lg:  clamp(2.375rem, 1.76rem + 2.63vw, 4.125rem);   /* 66px closing CTA */
	--fs-h1:     clamp(2.125rem, 1.76rem + 1.57vw, 3.17rem);    /* 50.7px section heading */
	--fs-stat:   clamp(2rem, 1.65rem + 1.5vw, 3rem);            /* 48px */
	--fs-h2:     clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);       /* 44px band */
	--fs-h3:     clamp(1.375rem, 1.22rem + .66vw, 1.8125rem);   /* 29px course title */
	--fs-h4:     clamp(1.25rem, 1.15rem + .5vw, 1.5625rem);     /* 25px step / 24px card */
	--fs-h5:     clamp(1.125rem, 1.05rem + .35vw, 1.375rem);    /* 22px name / 20px tab */
	--fs-lead: 1rem;            /* 16px / 27px */
	--fs-body: .9375rem;        /* 15px / 25px */
	--fs-sm: .875rem;           /* 14px / 24px */
	--fs-xs: .8125rem;          /* 13px / 22px */
	--fs-eyebrow: .75rem;       /* 12px, uppercase, tracked */

	--lh-tight: 1.14;
	--lh-snug: 1.17;
	--lh-body: 1.667;
	--lh-lead: 1.6875;

	--ls-display: -.052em;
	--ls-heading: -.045em;
	--ls-title: -.03em;
	--ls-eyebrow: .15em;

	/* --- Layout ---------------------------------------------------------- */
	--container: 90rem;                               /* 1440px */
	--gutter: clamp(1.25rem, 5.33vw, 4.8rem);         /* 76.8px */
	--section: clamp(4.5rem, 8.53vw, 7.68rem);        /* 122.88px */
	--section-sm: clamp(3.5rem, 6.4vw, 5.76rem);
	--head-gap: clamp(2rem, 3.8vw, 3.4375rem);        /* 55px heading → content */
	--label-col: 27.33%;                              /* eyebrow column in section heads */
	--header-h: 5.5rem;                               /* 88px */
	--header-h-sm: 4.25rem;

	/* --- Shape ----------------------------------------------------------- */
	--r-pill: 3.125rem;
	--r-md: .75rem;
	--r-sm: .5rem;
	--hairline: .8px;

	/* --- Motion ---------------------------------------------------------- */
	--ease-out: cubic-bezier(.22, 1, .36, 1);         /* expo-ish out: fast start, long settle */
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--ease-soft: cubic-bezier(.33, 1, .68, 1);
	--d-fast: 240ms;
	--d-base: 480ms;
	--d-slow: 900ms;
	--d-reveal: 1100ms;
	--d-hero: 1600ms;

	/* --- Z-index --------------------------------------------------------- */
	--z-preview: 140;   /* hover image preview: above sections, below the mini player */
	--z-dock: 150;      /* mini player: above page sections */
	--z-hero: 155;      /* hero text: above the media while it morphs back */
	--z-header: 200;
	--z-menu: 250;
	--z-theatre: 300;
}

/* Type-weight comparison (/?type=heavy): headlines and headings one step heavier;
   body copy, links and buttons keep their regular/medium weights.
   Decide, then either delete this block or move the value into :root above. */
.type-heavy {
	--fw-heading: var(--fw-regular);
}

/* ---- 01-fonts.css ---- */
/* Montserrat (variable, 300–700 used), self-hosted, split by unicode range so a page only
   downloads the subset it renders. */
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/montserrat-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/montserrat-latin-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/montserrat-latin-ext-italic.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- 02-base.css ---- */
/* ==========================================================================
   Base — reset + document defaults. Low specificity on purpose (:where).
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 1rem);
}
/* Native smooth scrolling for anchors when Lenis is not driving the page. */
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
	margin: 0;
	min-height: 100dvh;
	font-family: var(--ff);
	font-weight: var(--fw-regular);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--fg);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

:where(img, picture, video, svg, iframe) { display: block; max-width: 100%; }
:where(img) { height: auto; }
:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl) { margin: 0; }
:where(ul, ol) { padding: 0; }
:where(a) { color: inherit; text-decoration: none; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(input, select, textarea) { font: inherit; color: inherit; }
:where(hr) { border: 0; border-top: var(--hairline) solid var(--line); margin: 0; }
:where(address) { font-style: normal; }
:where(strong, b) { font-weight: var(--fw-medium); }
::selection { background: rgb(95 127 64 / .22); }

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

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: var(--gutter); top: -100px; z-index: calc(var(--z-menu) + 1);
	padding: .75rem 1.25rem; background: var(--c-green); color: #fff; border-radius: var(--r-pill);
}
.skip-link:focus { top: 1rem; clip: auto; clip-path: none; width: auto; height: auto; }

/* Contextual colour schemes ------------------------------------------------ */
.scheme-dark  { --bg: var(--c-ink);   --fg: var(--c-white); --fg-muted: var(--c-white-70); --line: var(--c-line-on-dark); --line-strong: var(--c-white); --btn-bg: var(--c-cream); --btn-fg: var(--c-ink); background: var(--bg); color: var(--fg); }
.scheme-green { --bg: var(--c-green); --fg: var(--c-white); --fg-muted: var(--c-white-70); --line: var(--c-line-on-dark-2); --line-strong: var(--c-white); --btn-bg: var(--c-cream); --btn-fg: var(--c-ink); background: var(--bg); color: var(--fg); }
.scheme-mist  { --bg: var(--c-mist);  background: var(--bg); }
.scheme-sage  { --bg: var(--c-sage);  background: var(--bg); }
.scheme-sand  { --bg: var(--c-sand);  background: var(--bg); }

/* Cross-document page fade (progressive enhancement, Chromium/Safari 18+). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: che-vt-out 220ms ease-in both; }
::view-transition-new(root) { animation: che-vt-in 380ms var(--ease-out) both; }
@keyframes che-vt-out { to { opacity: 0; } }
@keyframes che-vt-in { from { opacity: 0; transform: translateY(.75rem); } }

/* ---- 03-typography.css ---- */
/* ==========================================================================
   Typography — every text style in the brand system has one class.
   Headings are light (--fw-heading, 300) and tightly tracked; body is regular (400).
   ========================================================================== */
.t-display, .t-h1, .t-h1-lg, .t-h2, .t-stat {
	font-weight: var(--fw-heading);
	letter-spacing: var(--ls-heading);
	line-height: var(--lh-tight);
	text-wrap: balance;
}
.t-display { font-size: var(--fs-display); letter-spacing: var(--ls-display); line-height: 1.14; }
.t-h1-lg   { font-size: var(--fs-h1-lg); }
.t-h1      { font-size: var(--fs-h1); }
.t-h2      { font-size: var(--fs-h2); line-height: 1.2; }
.t-stat    { font-size: var(--fs-stat); line-height: 1.1; color: var(--c-green); }
.scheme-dark .t-stat, .scheme-green .t-stat { color: var(--fg); }

.t-h3, .t-h4, .t-h5 { font-weight: var(--fw-heading); letter-spacing: var(--ls-heading); line-height: var(--lh-snug); text-wrap: balance; }
.t-h3 { font-size: var(--fs-h3); }
.t-h4 { font-size: var(--fs-h4); }
.t-h5 { font-size: var(--fs-h5); letter-spacing: var(--ls-title); }

.t-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-sm   { font-size: var(--fs-sm); line-height: 1.714; }
.t-xs   { font-size: var(--fs-xs); line-height: 1.692; }
.t-muted { color: var(--fg-muted); }
.t-medium { font-weight: var(--fw-medium); }
.t-center { text-align: center; }

.eyebrow {
	display: block;
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-eyebrow);
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--fg);
}
.eyebrow--muted { color: var(--fg-muted); }

/* Numbered labels (01, 02…) */
.num { font-size: var(--fs-sm); line-height: 1.5; color: var(--c-green); font-variant-numeric: tabular-nums; }
.scheme-dark .num, .scheme-green .num { color: var(--fg-muted); }

/* Measure helpers */
.measure-heading { max-width: 52rem; }   /* 830px */
.measure-lead { max-width: 41rem; }      /* 650px */
.measure-lead--wide { max-width: 55rem; }
.measure-prose { max-width: 42rem; }

/* Rich text (editor content, blog articles, legacy pages) ----------------- */
.prose { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.prose > * + * { margin-top: 1.25em; }
.prose > h2, .prose > h3, .prose > h4 { margin-top: 2.2em; font-weight: var(--fw-heading); letter-spacing: var(--ls-heading); line-height: var(--lh-snug); text-wrap: balance; }
.prose > h2 { font-size: var(--fs-h3); }
.prose > h3 { font-size: var(--fs-h4); }
.prose > h4 { font-size: var(--fs-h5); }
.prose > h2 + *, .prose > h3 + *, .prose > h4 + * { margin-top: .8em; }
.prose a { text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: .2em; text-decoration-color: currentColor; transition: color var(--d-fast) ease; }
.prose a:hover { color: var(--c-green); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .45em; }
.prose blockquote { margin: 2em 0; padding: 0 0 0 1.5rem; border-left: var(--hairline) solid var(--line-strong); font-size: var(--fs-h5); font-weight: var(--fw-light); letter-spacing: var(--ls-title); line-height: 1.45; }
.prose blockquote cite { display: block; margin-top: .75em; font-size: var(--fs-xs); font-style: normal; color: var(--fg-muted); }
.prose figure { margin: 2.5em 0; }
.prose figcaption { margin-top: .75rem; font-size: var(--fs-xs); color: var(--fg-muted); }
.prose img { border-radius: var(--r-sm); }
.prose .alignwide { margin-inline: calc(-1 * clamp(0rem, 12vw - 5rem, 12rem)); max-width: none; }
.prose hr { margin: 3em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.prose th, .prose td { padding: .75em .5em; text-align: left; border-bottom: var(--hairline) solid var(--line); vertical-align: top; }
.prose th { font-weight: var(--fw-medium); }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }
.prose .wp-block-embed__wrapper { position: relative; }
.prose pre { overflow: auto; padding: 1rem; background: var(--c-mist); border-radius: var(--r-sm); font-size: var(--fs-xs); }
.prose > :first-child { margin-top: 0; }

/* ---- 04-layout.css ---- */
/* ==========================================================================
   Layout — container, sections, the eyebrow/heading split every section uses.
   ========================================================================== */
.container {
	width: min(100%, var(--container));
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--narrow { max-width: 62rem; }

.section { position: relative; padding-block: var(--section); }
.section--sm { padding-block: var(--section-sm); }
.section--flush { padding-block: 0; }
.section--pt0 { padding-top: 0; }

/* Eyebrow on the left, heading + lead on the right (27% / 73% at desktop). */
.section-head { display: grid; grid-template-columns: var(--label-col) minmax(0, 1fr); gap: 1.5rem 1.25rem; align-items: start; }
.section-head__label { padding-top: .625rem; }
.section-head__body > .t-h1 + .t-lead, .section-head__body > .t-h1-lg + .t-lead, .section-head__body > .t-h2 + .t-lead { margin-top: 1.5625rem; }
.section-head__body > .t-lead + .actions { margin-top: 2rem; }
.section-head--center { display: block; text-align: center; }
.section-head--center .eyebrow { margin-bottom: 1.375rem; }
.section-head--center .t-h1-lg { margin-inline: auto; max-width: 56rem; }
.section-head--center .actions { margin-top: 2rem; justify-content: center; }

/* Content that follows a section head */
.section-body { margin-top: var(--head-gap); }
.section-body--flush { margin-top: 0; }

/* Generic grids */
.grid { display: grid; gap: var(--grid-gap, 1.5625rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* Split panel: full-bleed image on one side, text panel on the other */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: min(67.5rem, 75vw); }
.split__media { position: relative; overflow: hidden; background: var(--c-fig); }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 6.4vw, 5.76rem); }
.split__panel > .eyebrow + .t-h1 { margin-top: 1.375rem; }
.split__panel > .t-h1 + .t-lead { margin-top: 1.6875rem; }
.split__panel > .t-lead + .actions { margin-top: 2rem; }
.split__panel > * { max-width: 33.5rem; }
.split--reverse .split__media { order: 2; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.actions--end { justify-content: flex-end; }

.stack > * + * { margin-top: var(--stack, 1rem); }

/* Horizontal scrolling rows on small screens only (cards, faculty); a normal grid above. */
@media (max-width: 47.99rem) {
	.scroller { display: flex; gap: var(--grid-gap, 1.25rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.scroller::-webkit-scrollbar { display: none; }
	.scroller > * { flex: 0 0 min(78vw, 22rem); scroll-snap-align: start; }
}

@media (max-width: 71.99rem) {
	.split { grid-template-columns: 1fr; min-height: 0; }
	.split__media { aspect-ratio: 16 / 10; }
	.split--reverse .split__media { order: 0; }
	.split__panel { padding-block: var(--section-sm); }
}
@media (max-width: 63.99rem) {
	.section-head { grid-template-columns: 1fr; gap: 1rem; }
	.section-head__label { padding-top: 0; }
	.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
	.split__panel > * { max-width: none; }
}

/* ---- 05-components.css ---- */
/* ==========================================================================
   Components — buttons, links, media, cards, lists. Reused on every page.
   ========================================================================== */

/* --- Arrow glyph used by links and buttons ------------------------------- */
.arrow { display: inline-block; width: .75em; height: .75em; flex: none; }
.arrow svg { width: 100%; height: 100%; display: block; }

/* --- Buttons (pill) ------------------------------------------------------- */
.btn {
	display: inline-flex; align-items: center; justify-content: space-between; gap: 1.75rem;
	min-height: 3rem; padding: .8125rem 1.375rem;
	border-radius: var(--r-pill);
	background: var(--btn-bg); color: var(--btn-fg);
	font-size: var(--fs-sm); font-weight: var(--fw-regular); line-height: 1.5; white-space: nowrap;
	transition: background-color var(--d-base) ease, color var(--d-base) ease, box-shadow var(--d-base) ease, transform 160ms ease;
}
.btn .arrow { transition: transform var(--d-slow) var(--ease-out); }
.btn:hover .arrow { transform: translate(2px, -2px); }
.btn:active { transform: scale(.985); }
.btn--primary { --btn-bg: var(--c-green); --btn-fg: var(--c-white); }
.btn--primary:hover { --btn-bg: var(--c-green-deep); }
.btn--light { --btn-bg: var(--c-cream); --btn-fg: var(--c-ink); }
.btn--light:hover { --btn-bg: var(--c-white); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--fg); box-shadow: inset 0 0 0 var(--hairline) var(--line-strong); }
.btn--outline:hover { --btn-bg: var(--fg); --btn-fg: var(--bg); }
.btn--block { width: 100%; }

/* --- Underlined arrow link ------------------------------------------------ */
.link-arrow {
	position: relative; display: inline-flex; align-items: center; gap: 1.75rem;
	padding-bottom: .5rem; font-size: var(--fs-sm); line-height: 1.5; color: var(--fg);
}
.link-arrow::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--hairline);
	background: var(--line-strong); transform-origin: left; transition: transform var(--d-base) var(--ease-out);
}
.link-arrow .arrow { transition: transform var(--d-base) var(--ease-out); }
.link-arrow:hover::after { transform: scaleX(0); transform-origin: right; }
.link-arrow:hover .arrow { transform: translate(2px, -2px); }
.link-arrow--sm { gap: .5rem; padding-bottom: .5rem; }
.link-arrow--dim::after { background: var(--line); }

/* Plain underline link (tabs, footer, inline) */
.link-line { position: relative; display: inline-block; padding-bottom: .5rem; }
.link-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--hairline); background: var(--line); transition: background-color var(--d-fast) ease; }
.link-line:hover::after, .link-line[aria-current]::after, .link-line.is-active::after { background: var(--line-strong); }

/* --- Circle icon button (course rows, carousels) -------------------------- */
.btn-circle {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 2.625rem; height: 2.625rem; border-radius: 50%;
	box-shadow: inset 0 0 0 var(--hairline) var(--line);
	color: var(--fg); background: transparent;
	transition: background-color var(--d-base) ease, color var(--d-base) ease, box-shadow var(--d-base) ease;
}
.btn-circle .arrow { width: .75rem; height: .75rem; transition: transform var(--d-slow) var(--ease-out); }
.btn-circle:hover, a:hover > .btn-circle, .row-link:hover .btn-circle { background: var(--c-green); color: var(--c-white); box-shadow: inset 0 0 0 var(--hairline) var(--c-green); }
.btn-circle:hover .arrow, .row-link:hover .btn-circle .arrow { transform: translate(1px, -1px); }

/* --- Play button ---------------------------------------------------------- */
.play {
	display: inline-flex; align-items: center; justify-content: center;
	width: clamp(4rem, 6vw, 5.3125rem); aspect-ratio: 1; border-radius: 50%;
	background: rgb(255 255 255 / .133); color: var(--c-white);
	box-shadow: inset 0 0 0 var(--hairline) rgb(255 255 255 / .6);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	transition: background-color var(--d-slow) ease, transform var(--d-slow) var(--ease-out);
}
.play svg { width: 28%; height: 28%; margin-left: 6%; }
.play:hover, a:hover > .play, button:hover > .play { background: rgb(255 255 255 / .26); transform: scale(1.04); }
.play--center { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }

/* --- Figures / images ----------------------------------------------------- */
.figure { position: relative; overflow: hidden; background: var(--c-fig); }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure--3x4 { aspect-ratio: 3 / 4; }
.figure--3x2 { aspect-ratio: 3 / 2; }
.figure--16x9 { aspect-ratio: 16 / 9; }
.figure--21x10 { aspect-ratio: 21 / 10; }
.figure--fill { position: absolute; inset: 0; }
.figure__overlay { position: absolute; inset: 0; background: var(--c-overlay-media); pointer-events: none; }
.figure__caption { position: absolute; left: 2.1875rem; right: 2.1875rem; bottom: 2rem; display: flex; justify-content: space-between; gap: 1.25rem; color: var(--c-white); font-size: var(--fs-sm); line-height: 1.7; }
/* Empty placeholder (client uploads images later) keeps the layout honest. */
.figure--empty::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgb(255 255 255 / .18), rgb(70 90 90 / .06)); }

/* --- Rules ---------------------------------------------------------------- */
.rule { border: 0; border-top: var(--hairline) solid var(--line); }
.rule--strong { border-color: var(--line-strong); }

/* --- Stat ----------------------------------------------------------------- */
.stat { padding-top: 2rem; }
.stat__label { margin-top: .875rem; font-size: var(--fs-sm); color: var(--fg); }

/* --- Numbered step -------------------------------------------------------- */
.step { position: relative; padding-top: 1.5rem; }
.step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--hairline); background: var(--line); transform-origin: left; }
.step__title { margin-top: 2.6rem; }
.step__text { margin-top: 1rem; }

/* --- Course row ----------------------------------------------------------- */
.row-link { position: relative; display: grid; grid-template-columns: 5.3125rem minmax(0, 1fr) minmax(11rem, 24%) auto; align-items: center; gap: 1.5rem; padding: 2rem 0; text-decoration: none; color: inherit; }
.row-link::before, .row-link:last-of-type::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--hairline); background: var(--line); transform-origin: left; }
.row-link:last-of-type::after { top: auto; bottom: 0; }
.row-link__num { align-self: center; }
.row-link__title { display: inline-block; transition: color var(--d-fast) ease, transform var(--d-base) var(--ease-out); }
.row-link:hover .row-link__title { transform: translateX(.3rem); }
.row-link__text { margin-top: .75rem; color: var(--fg); }
.row-link__meta { font-size: var(--fs-sm); line-height: 1.5; color: var(--fg); }
.row-link__meta span { display: block; }
.row-link__meta span + span { margin-top: .5rem; }
.row-link:hover .row-link__title { color: var(--c-green); }

/* Hover image preview: one fixed element that trails the pointer over [data-preview] rows
   (assets/js/src/07-hover-preview.js). Positioned by transform; the reveal lives on the inner
   wrapper so nothing in the page reflows. Pointer devices only. */
.hover-preview { position: fixed; top: 0; left: 0; z-index: var(--z-preview); width: clamp(13rem, 19vw, 19rem); aspect-ratio: 3 / 2; pointer-events: none; visibility: hidden; will-change: transform; }
.hover-preview.is-visible { visibility: visible; }
.hover-preview__inner { width: 100%; height: 100%; overflow: hidden; border-radius: var(--r-sm); background: var(--c-fig); box-shadow: 0 24px 60px -20px rgb(35 53 46 / .45); clip-path: inset(10% round var(--r-sm)); opacity: 0; transition: clip-path var(--d-slow) var(--ease-out), opacity var(--d-base) ease; }
.hover-preview.is-visible .hover-preview__inner { clip-path: inset(0 round var(--r-sm)); opacity: 1; }
.hover-preview img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform var(--d-hero) var(--ease-out); }
.hover-preview.is-visible img { transform: scale(1); }

/* --- Person card ---------------------------------------------------------- */
.person { display: block; color: inherit; }
.person__figure { border-radius: 0; }
.person__figure img { transition: transform var(--d-hero) var(--ease-out); }
.person:hover .person__figure img { transform: scale(1.03); }
.person__row { display: flex; align-items: center; justify-content: space-between; gap: .625rem; padding-top: 1.25rem; }
.person__name { font-size: var(--fs-h5); font-weight: var(--fw-heading); letter-spacing: var(--ls-title); line-height: 1.5; }
.person__role { margin-top: .25rem; font-size: var(--fs-xs); line-height: 1.7; color: var(--fg); }
.person .arrow { width: .75rem; height: .75rem; flex: none; transition: transform var(--d-base) var(--ease-out); }
.person:hover .arrow { transform: translate(2px, -2px); }

/* --- Story card (journal) ------------------------------------------------- */
.card { display: flex; flex-direction: column; color: inherit; }
.card__figure img { transition: transform var(--d-hero) var(--ease-out); }
.card:hover .card__figure img { transform: scale(1.04); }
.card__body { padding-top: 1.5rem; }
.card__title { margin-top: .75rem; }
.card__title a::before { content: ""; position: absolute; inset: 0; }
.card__excerpt { margin-top: .75rem; }
.card__link { margin-top: 1.375rem; }
.card { position: relative; }
.card__link, .card .eyebrow a { position: relative; z-index: 1; }

/* --- Tabs (text with underline) ------------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: 2.1875rem; }
.tabs .link-line { font-size: var(--fs-h5); font-weight: var(--fw-light); letter-spacing: var(--ls-title); line-height: 1.3; }

/* --- Tag / category pill -------------------------------------------------- */
.tag { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .375rem 1rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 var(--hairline) var(--line); font-size: var(--fs-xs); line-height: 1.5; color: var(--fg); transition: background-color var(--d-fast) ease, color var(--d-fast) ease, box-shadow var(--d-fast) ease; }
.tag:hover, .tag.is-active, .tag[aria-current] { background: var(--c-ink); color: var(--c-cream); box-shadow: inset 0 0 0 var(--hairline) var(--c-ink); }

/* --- Band (full-width strip with rule above/below) ------------------------ */
.band { display: grid; grid-template-columns: var(--label-col) minmax(0, 1fr) auto; align-items: center; gap: 1.5rem 1.25rem; padding-block: 2.1875rem; border-top: var(--hairline) solid var(--line); border-bottom: var(--hairline) solid var(--line); }

@media (max-width: 63.99rem) {
	.row-link { grid-template-columns: 3rem minmax(0, 1fr) auto; }
	.row-link__meta { grid-column: 2; }
	.row-link .btn-circle { grid-column: 3; grid-row: 1 / span 2; }
	.band { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 47.99rem) {
	.btn { gap: 1.25rem; }
	.figure__caption { left: 1.25rem; right: 1.25rem; bottom: 1.25rem; font-size: var(--fs-xs); }
	.row-link { grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 1rem; padding: 1.5rem 0; }
	.tabs { gap: 1.5rem; }
}

/* ---- 06-header.css ---- */
/* ==========================================================================
   Header + navigation. Translucent, blurred, hides on scroll-down and returns
   on scroll-up. Mobile: full-screen menu with staggered links.
   ========================================================================== */
.site-header {
	position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
	height: var(--header-h);
	background: var(--c-cream-94);
	border-bottom: var(--hairline) solid var(--line);
	backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
	transition: transform var(--d-base) var(--ease-out), background-color var(--d-base) ease;
	will-change: transform;
}
/* Over a full-bleed hero: frosted glass — the media shows through, the logo and nav keep their colours. */
.hero-full .site-header { background: rgb(247 246 239 / .8); border-bottom-color: rgb(255 255 255 / .3); backdrop-filter: blur(22px) saturate(1.3) brightness(1.12); -webkit-backdrop-filter: blur(22px) saturate(1.3) brightness(1.12); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-hidden:focus-within { transform: none; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.875rem; height: 100%; }
.site-logo { display: block; flex: none; }
.site-logo img { width: 10.625rem; height: auto; }

.site-nav { display: flex; align-items: center; gap: 1.75rem; }
.site-nav__list { display: flex; align-items: center; gap: 1.75rem; list-style: none; }
.site-nav__list a { position: relative; display: block; padding: .625rem 0; font-size: var(--fs-sm); line-height: 1.714; color: var(--fg); }
.site-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .35rem; height: var(--hairline); background: var(--line-strong); transform: scaleX(0); transform-origin: right; transition: transform var(--d-base) var(--ease-out); }
.site-nav__list a:hover::after, .site-nav__list .current-menu-item > a::after, .site-nav__list .current-menu-ancestor > a::after, .site-nav__list .current_page_parent > a::after { transform: scaleX(1); transform-origin: left; }
.site-nav .btn { margin-left: .25rem; }

/* Hamburger */
.nav-toggle { display: none; position: relative; width: 2.75rem; height: 2.75rem; margin-right: -.5rem; border-radius: 50%; }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { position: absolute; left: .75rem; width: 1.25rem; height: 1.5px; background: var(--c-ink); content: ""; transition: transform var(--d-base) var(--ease-out), opacity var(--d-fast) ease, background-color var(--d-fast) ease; }
.nav-toggle__bar { top: 50%; }
.nav-toggle__bar::before { left: 0; top: -.375rem; }
.nav-toggle__bar::after { left: 0; top: .375rem; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(.375rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-.375rem) rotate(-45deg); }

/* Mobile menu (full-screen) */
.menu-panel {
	position: fixed; inset: 0; z-index: var(--z-menu);
	display: flex; flex-direction: column;
	padding: calc(var(--header-h-sm) + 1.5rem) var(--gutter) max(1.5rem, env(safe-area-inset-bottom));
	background: var(--c-cream);
	visibility: hidden; opacity: 0;
	transition: opacity var(--d-base) var(--ease-out), visibility 0s linear var(--d-base);
	overflow-y: auto;
}
.menu-panel.is-open { visibility: visible; opacity: 1; transition: opacity var(--d-base) var(--ease-out); }
.menu-panel__list { list-style: none; }
.menu-panel__list li { border-top: var(--hairline) solid var(--line); opacity: 0; transform: translateY(14px); transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out); transition-delay: calc(60ms + var(--i, 0) * 50ms); }
.menu-panel__list li:last-child { border-bottom: var(--hairline) solid var(--line); }
.menu-panel.is-open .menu-panel__list li { opacity: 1; transform: none; }
.menu-panel__list a { display: flex; align-items: center; justify-content: space-between; padding: 1.125rem 0; font-size: var(--fs-h4); font-weight: var(--fw-light); letter-spacing: var(--ls-title); }
.menu-panel__list a .arrow { width: .8rem; height: .8rem; opacity: .6; }
.menu-panel__footer { margin-top: auto; padding-top: 2rem; display: grid; gap: 1.25rem; opacity: 0; transform: translateY(14px); transition: opacity var(--d-slow) var(--ease-out) 360ms, transform var(--d-slow) var(--ease-out) 360ms; }
.menu-panel.is-open .menu-panel__footer { opacity: 1; transform: none; }
.menu-panel__footer .btn { justify-content: space-between; width: 100%; min-height: 3.5rem; }
.menu-panel__meta { font-size: var(--fs-xs); color: var(--fg-muted); }
body.menu-open { overflow: hidden; }
body.menu-open .site-header { transform: none; background: var(--c-cream); z-index: calc(var(--z-menu) + 1); border-bottom-color: transparent; }

/* Space for the fixed header on every page except where a hero sits under it */
.site-main { padding-top: var(--header-h); }
.site-main--flush { padding-top: 0; }

@media (max-width: 63.99rem) {
	:root { --header-h: var(--header-h-sm); }
	.site-logo img { width: 8.5rem; }
	.site-nav { display: none; }
	.nav-toggle { display: block; }
}

/* Logged-in admin bar sits above the fixed header. */
body.admin-bar .site-header { top: 32px; }
body.admin-bar .menu-panel { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header, body.admin-bar .menu-panel { top: 46px; } }

/* ---- 07-footer.css ---- */
/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--c-sage); padding: clamp(3rem, 4.9vw, 4.375rem) 0 1.5rem; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 34%) repeat(3, minmax(0, 1fr)); gap: 2.5rem 2.5rem; }
.site-footer__brand .site-logo img { width: 10.625rem; }
.site-footer__brand p { margin-top: .9375rem; font-size: var(--fs-lead); line-height: 1.6; }
.site-footer__brand p:first-of-type { margin-top: 1.5rem; }
.site-footer__col h3 { font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1.1; }
.site-footer__col ul { list-style: none; margin-top: 1.375rem; }
.site-footer__col li + li { margin-top: .625rem; }
.site-footer__col a { display: inline-block; padding: .25rem 0; font-size: var(--fs-lead); line-height: 1.5; transition: color var(--d-fast) ease; }
.site-footer__col a:hover { color: var(--c-green); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 1.5rem; margin-top: clamp(2.5rem, 4.2vw, 3.75rem); padding-top: 1.5625rem; border-top: var(--hairline) solid var(--line); font-size: var(--fs-xs); line-height: 1.6; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; list-style: none; }
.site-footer__legal a:hover { color: var(--c-green); }

@media (max-width: 63.99rem) {
	.site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 47.99rem) {
	.site-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
	.site-footer__bottom { flex-direction: column; }
}

/* ---- 08-hero.css ---- */
/* ==========================================================================
   Hero — full-bleed Vimeo loop under a left-to-right dark gradient.
   The media layer is fixed and driven by JS so it can (1) follow the hero while
   scrolling, (2) morph into the floating mini player once the hero has left
   the viewport, and (3) morph again into the full-screen theatre. Everything
   animates with transform/opacity only.
   ========================================================================== */
.hero {
	position: relative;
	height: clamp(34rem, calc(100svh - var(--header-h)), 56rem);
	margin-top: var(--header-h);
	background: transparent; color: var(--c-white);   /* the fixed media layer paints the background */
	overflow: clip;
}
.hero--short { height: clamp(26rem, 62svh, 40rem); }
/* Full-bleed variant: the media fills the whole viewport and runs under the glass header. */
.hero-full .hero { height: 100svh; margin-top: 0; }
.hero-full .hero__inner { padding-top: var(--header-h); }

.hero__media {
	position: fixed; top: 0; left: 0; z-index: -1;      /* stays behind everything in the hero */
	width: 100vw; height: var(--hero-h, 100svh);
	transform-origin: top left;
	will-change: transform;
	overflow: hidden;
	background: var(--c-ink);
}
/* Once docked it must sit above the page content. */
.hero__media.is-docked, .hero__media.is-morphing { z-index: var(--z-dock); }
/* Theatre: same z as the overlay but later in the DOM, so it paints above the backdrop. */
.hero__media.is-theatre { z-index: var(--z-theatre); }
.hero__media.is-morphing { transition: clip-path var(--d-slow) var(--ease-out), opacity var(--d-base) ease; }
.hero__media.is-docked { cursor: pointer; }
.hero__media.is-hidden { opacity: 0; pointer-events: none; }

.hero__layer { position: absolute; inset: 0; }
.hero__poster img { width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; transition: opacity var(--d-hero) ease; }
.hero__video.is-playing { opacity: 1; }
.hero__video iframe { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); border: 0; pointer-events: none; }
/* Cover-fit a 16:9 player inside any aspect box (the base reset's max-width would letterbox it). */
.hero__video iframe { width: max(100%, calc(var(--hero-h, 100svh) * 16 / 9)); height: max(100%, calc(100vw * 9 / 16)); max-width: none; max-height: none; }
.hero__shade { background: var(--c-overlay-hero); }
.hero__media.is-docked .hero__shade { opacity: 0; }
.hero__media .hero__shade { transition: opacity var(--d-slow) ease; }

/* Mini-player chrome (only visible when docked) */
.hero__dock-ui { position: absolute; inset: var(--dock-crop, 0px) 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--d-base) ease; }
.hero__media.is-docked .hero__dock-ui { opacity: 1; pointer-events: auto; }
.hero__dock-ui .play { width: 22%; box-shadow: inset 0 0 0 calc(var(--hairline) / var(--dock-scale, .2)) rgb(255 255 255 / .6); }
.hero__dock-ui .play svg { width: 30%; }
.hero__dock-label { position: absolute; left: 6%; bottom: 7%; font-size: calc(var(--fs-sm) / var(--dock-scale, .2)); line-height: 1.3; color: var(--c-white); text-shadow: 0 1px 12px rgb(0 0 0 / .4); }
.hero__dock-close { position: absolute; top: 5%; right: 4%; width: 11%; aspect-ratio: 1; border-radius: 50%; background: rgb(0 0 0 / .35); color: #fff; display: grid; place-items: center; }
.hero__dock-close svg { width: 40%; height: 40%; }

/* Content */
.hero__inner { position: relative; z-index: var(--z-hero); display: flex; flex-direction: column; justify-content: center; height: 100%; padding-bottom: 6.5rem; }
.hero__inner > .eyebrow { color: var(--c-white); }
.hero__inner > .t-display { margin-top: 2.25rem; max-width: 52rem; }
.hero__lead { margin-top: 2.5rem; max-width: 40rem; font-size: clamp(1rem, .9rem + .5vw, 1.1875rem); line-height: 1.6; }
.hero__inner > .actions { margin-top: 2.5rem; }
.hero__play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: calc(var(--z-hero) + 1); }
.hero__bar {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: var(--z-hero);
	display: flex; justify-content: space-between; align-items: flex-start; gap: 1.25rem;
	padding-top: 1.375rem; padding-bottom: 1.375rem;
	font-size: var(--fs-sm); line-height: 1.5; color: var(--c-white);
}
.hero__bar::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: var(--hairline); background: var(--c-line-on-dark); transform-origin: left; }
.hero__bar a { display: inline-flex; align-items: center; gap: .5rem; }
.hero__bar a .arrow { transition: transform var(--d-base) var(--ease-out); }
.che-js .hero.is-ready .hero__bar a .arrow { animation: che-bob 2.8s var(--ease-in-out) 2.4s infinite; }
.hero__bar a:hover .arrow { animation-play-state: paused; transform: translateY(3px); }

/* Intro animation (runs once the page is ready) */
.che-js .hero__inner > *, .che-js .hero__bar, .che-js .hero__play { opacity: 0; }
.che-js .hero__bar::before { transform: scaleX(0); }
.che-js .hero .line > span { transform: translateY(110%); }
.che-js .hero__poster { transform: scale(1.08); opacity: 0; }
.che-js .hero.is-ready .hero__poster { animation: che-hero-media var(--d-hero) var(--ease-out) forwards; }
.che-js .hero.is-ready .hero__inner > .eyebrow { animation: che-rise 1000ms var(--ease-out) 200ms forwards; }
.che-js .hero.is-ready .hero__inner > .t-display { opacity: 1; }
.che-js .hero.is-ready .line > span { animation: che-line 1100ms var(--ease-out) forwards; animation-delay: calc(320ms + var(--i, 0) * 120ms); }
.che-js .hero.is-ready .hero__lead { animation: che-rise 1000ms var(--ease-out) 720ms forwards; }
.che-js .hero.is-ready .hero__inner > .actions { animation: che-rise 1000ms var(--ease-out) 860ms forwards; }
.che-js .hero.is-ready .hero__play { animation: che-fade 900ms ease 1100ms forwards; }
.che-js .hero.is-ready .hero__bar { animation: che-fade 900ms ease 1000ms forwards; }
.che-js .hero.is-ready .hero__bar::before { animation: che-grow 1200ms var(--ease-out) 900ms forwards; }

@keyframes che-hero-media { from { transform: scale(1.08); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes che-rise { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }
@keyframes che-line { to { transform: none; } }
@keyframes che-fade { to { opacity: 1; } }
@keyframes che-bob { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }
@keyframes che-grow { to { transform: scaleX(1); } }

@media (max-width: 63.99rem) {
	.hero { height: clamp(30rem, calc(100svh - var(--header-h)), 46rem); }
	.hero__inner { justify-content: flex-end; padding-bottom: 6rem; }
	.hero__inner > .t-display { margin-top: 1.5rem; }
	.hero__lead { margin-top: 1.5rem; }
	.hero__inner > .actions { margin-top: 1.75rem; }
	.hero__play { top: 34%; }
	.hero__bar { font-size: var(--fs-xs); }
}
@media (max-width: 47.99rem) {
	.hero__bar span:first-child { display: none; }
	.hero__bar { justify-content: flex-end; }
}

/* ---- 09-video.css ---- */
/* ==========================================================================
   Theatre — full-screen Vimeo player. Opened from the hero, the mini player,
   or any [data-theatre] trigger. The hero media morphs into the frame first;
   the real player crossfades in once it starts.
   ========================================================================== */
.theatre {
	position: fixed; inset: 0; z-index: var(--z-theatre);
	display: grid; place-items: center;
	background: rgb(23 33 31 / .96);
	opacity: 0; visibility: hidden;
	transition: opacity var(--d-slow) ease, visibility 0s linear var(--d-slow);
}
.theatre.is-open { opacity: 1; visibility: visible; transition: opacity var(--d-slow) ease; }
.theatre__frame {
	position: relative; width: min(92vw, calc((100svh - 9rem) * 16 / 9)); aspect-ratio: 16 / 9;
	background: #000; box-shadow: 0 40px 100px -40px rgb(0 0 0 / .8);
	transform: scale(.94); opacity: 0;
	transition: transform var(--d-slow) var(--ease-out), opacity var(--d-slow) ease;
}
.theatre.is-open .theatre__frame { transform: none; opacity: 1; }
.theatre__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity var(--d-base) ease; }
.theatre__frame iframe.is-playing { opacity: 1; }
.theatre__close {
	position: absolute; top: max(1.25rem, env(safe-area-inset-top)); right: max(1.25rem, env(safe-area-inset-right));
	display: inline-flex; align-items: center; gap: .75rem; padding: .625rem .5rem .625rem 1rem;
	color: var(--c-white); font-size: var(--fs-sm); border-radius: var(--r-pill);
	transition: background-color var(--d-fast) ease;
}
.theatre__close:hover { background: rgb(255 255 255 / .1); }
.theatre__close svg { width: 1.75rem; height: 1.75rem; }
.theatre__caption { position: absolute; left: 0; right: 0; bottom: -2.5rem; color: var(--c-white-70); font-size: var(--fs-xs); text-align: center; }
body.theatre-open { overflow: hidden; }
body.theatre-open .site-header { transform: translateY(-100%); }

/* Inline video figure (e.g. "A real lecture") */
.video-figure { display: block; width: 100%; text-align: left; }
.video-figure .figure { background: var(--c-fig); }
.video-figure .figure img { transition: transform var(--d-hero) var(--ease-out); }
.video-figure:hover .figure img { transform: scale(1.02); }

/* ---- 10-home.css ---- */
/* ==========================================================================
   Homepage sections (each maps 1:1 to a Figma section)
   ========================================================================== */

/* The institution — stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5625rem; border-top: var(--hairline) solid var(--line); }

/* Explore study — course list */
.courses__list { display: block; }
.courses__foot { display: flex; justify-content: flex-end; margin-top: 2rem; }

/* How learning works */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.875rem; }

/* Meet the faculty */
.faculty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5625rem; }
.faculty__foot { display: flex; justify-content: flex-end; margin-top: 2rem; }

/* CHE worldwide — tabs sit in the content column */
.worldwide__tabs { padding-left: var(--label-col); }

/* The journal strip */
.stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5625rem; }

/* See the teaching */
.teaching__foot { display: flex; justify-content: flex-end; margin-top: 2rem; }

/* Closing CTA */
.cta { padding-block: clamp(4.5rem, 6.9vw, 6.25rem); text-align: center; }

@media (min-width: 64rem) {
	.faculty > :nth-child(even) { margin-top: 3.75rem; }
}
@media (max-width: 63.99rem) {
	.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.faculty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.worldwide__tabs { padding-left: 0; }
	.stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
	.stats { grid-template-columns: 1fr; gap: 0; }
	.stat + .stat { border-top: var(--hairline) solid var(--line); padding-top: 1.5rem; margin-top: 1.5rem; }
	.stat { padding-top: 1.5rem; }
	.steps { grid-template-columns: 1fr; gap: 1.25rem; }
	.step__title { margin-top: 1rem; }
	.faculty.scroller { display: flex; }
	.stories.scroller { display: flex; }
	.faculty.scroller > *, .stories.scroller > * { flex-basis: min(76vw, 20rem); }
	.courses__foot, .faculty__foot, .teaching__foot { justify-content: flex-start; }
}

/* ---- 11-blog.css ---- */
/* ==========================================================================
   Journal (blog) — editorial layout: featured story, filters, card grid,
   article page with reading progress and related stories.
   ========================================================================== */

/* Archive header */
.journal-hero { padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.journal-hero .t-display { max-width: 16ch; }
.journal-hero__intro { margin-top: 1.5rem; max-width: 36rem; }
.journal-filter { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 2.5rem; }

/* Featured story */
.feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.feature__figure { border-radius: 0; }
.feature__body { display: flex; flex-direction: column; align-items: flex-start; }
.feature__body .eyebrow + .t-h1 { margin-top: 1.25rem; }
.feature__body .t-h1 { max-width: 14ch; }
.feature__body .t-lead { margin-top: 1.25rem; max-width: 34rem; }
.feature__meta { margin-top: 1.25rem; }
.feature__body .link-arrow { margin-top: 2rem; }

/* Card grid with a subtle editorial rhythm (every 4th card wide) */
.stories--journal { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem) 1.5625rem; }
.stories--journal > .card { grid-column: span 4; }
.stories--journal > .card:nth-child(7n + 1) { grid-column: span 12; }
.stories--journal > .card:nth-child(7n + 1) .card__figure { aspect-ratio: 21 / 9; }
.stories--journal > .card:nth-child(7n + 1) .card__title { font-size: var(--fs-h3); }
.stories--journal > .card:nth-child(7n + 1) .card__body { max-width: 44rem; }

.meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: var(--fs-xs); line-height: 1.6; color: var(--fg-muted); }
.meta > * + *::before { content: "·"; margin-right: 1rem; }

/* Pagination */
.pagination { display: flex; justify-content: center; margin-top: clamp(3rem, 5vw, 4.5rem); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.625rem; height: 2.625rem; padding: 0 .75rem; border-radius: 50%; box-shadow: inset 0 0 0 var(--hairline) var(--line); font-size: var(--fs-sm); transition: background-color var(--d-fast) ease, color var(--d-fast) ease; }
.pagination .page-numbers:hover, .pagination .page-numbers.current { background: var(--c-ink); color: var(--c-cream); }
.pagination .page-numbers.dots { box-shadow: none; }

/* Article ---------------------------------------------------------------- */
.progress { position: fixed; left: 0; top: 0; z-index: calc(var(--z-header) + 1); width: 100%; height: 2px; background: var(--c-green); transform: scaleX(0); transform-origin: left; pointer-events: none; }

.article-hero { padding-top: clamp(3rem, 6vw, 5.5rem); }
.article-hero__inner { display: grid; grid-template-columns: var(--label-col) minmax(0, 1fr); gap: 1.5rem 1.25rem; }
.article-hero__aside { padding-top: .625rem; }
.article-hero__aside .meta { flex-direction: column; gap: .5rem; }
.article-hero__aside .meta > * + *::before { content: none; margin: 0; }
.article-hero__title { max-width: 18ch; }
.article-hero__standfirst { margin-top: 1.5625rem; max-width: 40rem; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.6; color: var(--fg); }
.article-hero__figure { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.article-hero__figure figcaption { margin-top: .75rem; font-size: var(--fs-xs); color: var(--fg-muted); }

.article { display: grid; grid-template-columns: var(--label-col) minmax(0, 1fr); gap: 2rem 1.25rem; padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.article__aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; display: grid; gap: 1.5rem; font-size: var(--fs-xs); color: var(--fg-muted); }
.article__aside h2 { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: var(--fw-regular); color: var(--fg); }
.article__share { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.article__share a { display: inline-flex; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; border-radius: 50%; box-shadow: inset 0 0 0 var(--hairline) var(--line); color: var(--fg); transition: background-color var(--d-fast) ease, color var(--d-fast) ease; }
.article__share a:hover { background: var(--c-ink); color: var(--c-cream); }
.article__share svg { width: 1rem; height: 1rem; }
.article__body { max-width: 44rem; }
.article__body > .prose > p:first-of-type::first-letter { float: left; margin: .1em .12em 0 0; font-size: 3.6em; line-height: .8; font-weight: var(--fw-light); color: var(--c-green); }
.article__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 3rem; }
.article__author { display: flex; gap: 1.25rem; align-items: center; margin-top: 3rem; padding-top: 2rem; border-top: var(--hairline) solid var(--line); }
.article__author img { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; }
.article__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: clamp(3rem, 5vw, 4.5rem); padding-top: 2rem; border-top: var(--hairline) solid var(--line); }
.article__nav a { display: block; }
.article__nav a .eyebrow { color: var(--fg-muted); }
.article__nav a .t-h5 { margin-top: .75rem; transition: color var(--d-fast) ease; }
.article__nav a:hover .t-h5 { color: var(--c-green); }
.article__nav .is-next { text-align: right; }

.related { border-top: var(--hairline) solid var(--line); }

@media (max-width: 63.99rem) {
	.feature { grid-template-columns: 1fr; }
	.stories--journal > .card, .stories--journal > .card:nth-child(7n + 1) { grid-column: span 6; }
	.stories--journal > .card:nth-child(7n + 1) .card__figure { aspect-ratio: 3 / 2; }
	.stories--journal > .card:nth-child(7n + 1) .card__title { font-size: var(--fs-h4); }
	.article-hero__inner, .article { grid-template-columns: 1fr; }
	.article__aside { position: static; grid-template-columns: 1fr auto; align-items: center; }
	.article-hero__aside { padding-top: 0; }
	.article-hero__aside .meta { flex-direction: row; }
	.article-hero__aside .meta > * + *::before { content: "·"; margin-right: 1rem; }
}
@media (max-width: 47.99rem) {
	.stories--journal { display: grid; grid-template-columns: 1fr; }
	.stories--journal > .card, .stories--journal > .card:nth-child(7n + 1) { grid-column: auto; }
	.article__nav { grid-template-columns: 1fr; }
	.article__nav .is-next { text-align: left; }
}

/* ---- 12-page.css ---- */
/* ==========================================================================
   Standard pages (incl. migrated legacy content) and the page hero.
   ========================================================================== */
.page-hero { padding-top: clamp(3rem, 6vw, 5.5rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.page-hero__inner { display: grid; grid-template-columns: var(--label-col) minmax(0, 1fr); gap: 1.5rem 1.25rem; }
.page-hero__aside { padding-top: .625rem; }
.page-hero .t-display { max-width: 16ch; }
.page-hero__intro { margin-top: 1.5625rem; max-width: 40rem; }
.page-hero--media { padding-bottom: 0; }
.page-hero__figure { margin-top: clamp(2.5rem, 5vw, 4.5rem); }

.page-content { display: grid; grid-template-columns: var(--label-col) minmax(0, 1fr); gap: 2rem 1.25rem; }
.page-content__aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
.page-content__body { max-width: 44rem; }
.page-content--full .page-content__body { max-width: none; }

/* Sub-navigation for page families (policies, courses…) */
.subnav { list-style: none; display: grid; gap: .25rem; font-size: var(--fs-sm); }
.subnav a { display: block; padding: .5rem 0; color: var(--fg-muted); border-bottom: var(--hairline) solid var(--line); transition: color var(--d-fast) ease; }
.subnav a:hover, .subnav .is-current > a { color: var(--fg); }

/* Migrated Elementor content: neutralise leftover layout wrappers, keep the words. */
.legacy .prose > div { margin-top: 1.25em; }
.legacy .prose .btn, .legacy .prose a.button { margin-top: .5em; }
.legacy .prose img { max-width: 100%; height: auto; }
.legacy .prose figure.wp-block-image { margin-inline: 0; }

/* Breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: var(--fs-xs); color: var(--fg-muted); list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .6; }
.crumbs a:hover { color: var(--fg); }

/* Search + 404 */
.search-form { display: flex; gap: .75rem; max-width: 34rem; }
.search-form input { flex: 1; min-height: 3rem; padding: 0 1rem; border: var(--hairline) solid var(--line-strong); border-radius: var(--r-pill); background: transparent; }
.error-404 { padding-block: clamp(5rem, 12vw, 10rem); }

@media (max-width: 63.99rem) {
	.page-hero__inner, .page-content { grid-template-columns: 1fr; }
	.page-hero__aside { padding-top: 0; }
	.page-content__aside { position: static; }
	.subnav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
	.subnav a { border-bottom: 0; padding: .25rem 0; }
}

/* Sitemap page: nested page lists */
.sitemap ul { list-style: none; padding-left: 0; }
.sitemap ul ul { padding-left: 1.25rem; margin-top: .45em; }
.sitemap li { margin: 0; padding: .35em 0; border-bottom: var(--hairline) solid var(--line); }
.sitemap li li:last-child { border-bottom: 0; }
.sitemap a { text-decoration: none; }

/* ---- 13-motion.css ---- */
/* ==========================================================================
   Motion system.
   - [data-reveal]        one element fades/rises into place when it enters view
   - [data-reveal-group]  children stagger in (JS assigns --i to each child)
   - .line > span         masked line reveal for headings (wrap lines in .line)
   - [data-parallax]      subtle transform driven by scroll (JS sets --py)
   Everything is transform/opacity/clip-path only; nothing animates layout.
   States are gated on html.che-js so content is never hidden without JS,
   and prefers-reduced-motion switches every effect off.
   ========================================================================== */
.che-js [data-reveal], .che-js [data-reveal-group] > * {
	opacity: 0;
	transform: translate3d(0, 1.75rem, 0);
	transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out);
	transition-delay: calc(var(--i, 0) * var(--stagger, 90ms));
}
.che-js [data-reveal].is-in, .che-js [data-reveal-group].is-in > * { opacity: 1; transform: none; }

.che-js [data-reveal="fade"] { transform: none; }
.che-js [data-reveal="scale"] { transform: scale(.96); }

/* Masked lines: each .line clips its inner span, which slides up. */
.line { display: block; overflow: hidden; }
.line > span { display: block; will-change: transform; }
.che-js [data-reveal="lines"] { opacity: 1; transform: none; transition: none; }
.che-js [data-reveal="lines"] .line > span { transform: translate3d(0, 110%, 0); transition: transform var(--d-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms); }
.che-js [data-reveal="lines"].is-in .line > span { transform: none; }

/* Clip reveal for images: the frame wipes up while the picture settles from a zoom. */
.che-js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1300ms var(--ease-out); }
.che-js [data-reveal="clip"] img { transform: scale(1.12); transition: transform 1600ms var(--ease-out); }
.che-js [data-reveal="clip"].is-in { clip-path: inset(0); }
.che-js [data-reveal="clip"].is-in img { transform: none; }

/* Rules draw in from the left. */
.che-js [data-reveal="rule"] { opacity: 1; transform: scaleX(0); transform-origin: left; transition: transform 1200ms var(--ease-out); }
.che-js [data-reveal="rule"].is-in { transform: none; }

/* Parallax (JS writes --py in px). Wrapped images are oversized so edges never show. */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.figure [data-parallax] { height: 120%; top: -10%; position: absolute; left: 0; width: 100%; object-fit: cover; }

/* Scroll-linked text scrub: words brighten one after another as the paragraph travels
   up the viewport (JS writes --p 0→1 on the element; each .w gets --i, the element --n). */
.che-js [data-scrub] .w { opacity: calc(.16 + .84 * clamp(0, var(--p, 0) * var(--n, 1) - var(--i, 0), 1)); }

/* Hairlines under steps and course rows draw in from the left once their group is revealed. */
.che-js [data-reveal-group] > .step::before, .che-js [data-reveal-group] > .row-link::before, .che-js [data-reveal-group] > .row-link:last-of-type::after {
	transform: scaleX(0);
	transition: transform 1400ms var(--ease-out);
	transition-delay: calc(var(--i, 0) * 120ms);
}
.che-js [data-reveal-group].is-in > .step::before, .che-js [data-reveal-group].is-in > .row-link::before, .che-js [data-reveal-group].is-in > .row-link:last-of-type::after { transform: none; }

/* Number count-up gets tabular figures so it doesn't jitter. */
[data-count] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
	.che-js [data-reveal], .che-js [data-reveal-group] > *, .che-js [data-reveal="lines"] .line > span, .che-js [data-reveal="clip"], .che-js [data-reveal="clip"] img, .che-js [data-reveal="rule"] {
		opacity: 1; transform: none; clip-path: none; transition: none;
	}
	.che-js .hero__inner > *, .che-js .hero__bar, .che-js .hero__play { opacity: 1; animation: none; }
	.che-js .hero__bar::before { transform: none; }
	.che-js .hero .line > span { transform: none; }
	.che-js .hero__poster { transform: none; opacity: 1; animation: none; }
	[data-parallax] { transform: none !important; }
	.che-js [data-scrub] .w { opacity: 1; }
	.che-js [data-reveal-group] > .step::before, .che-js [data-reveal-group] > .row-link::before, .che-js [data-reveal-group] > .row-link:last-of-type::after { transform: none; transition: none; }
	.hero__inner { transform: none !important; opacity: 1 !important; }
	.hero__media.is-morphing { transition: none; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- 14-utilities.css ---- */
/* ==========================================================================
   Utilities (kept deliberately small)
   ========================================================================== */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mt-4 { margin-top: 2rem !important; }
.mt-5 { margin-top: 3rem !important; }
.hide-sm { }
.show-sm { display: none !important; }
@media (max-width: 47.99rem) {
	.hide-sm { display: none !important; }
	.show-sm { display: initial !important; }
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aspect-16x9 { aspect-ratio: 16 / 9; }
.no-wrap { white-space: nowrap; }