/* =========================================================================
   Compas — main.css (native CSS, hand-authored, no build step)
   Sections: 0.Fonts  1.Tokens  2.Reset  3.Base/Typography  4.Layout
   5.Header  6.Nav  7.Footer  8.Buttons  9.Entries/Cards  10.Forms
   11.Pages  12.Utilities  13.Responsive
   ========================================================================= */

/* 0. Fonts — TT Norms (local, @font-face) -------------------------------- */
/* Files live in /assets/fonts/tt-norms/ — paths relative to this file.     */
@font-face {
	font-family: "TT Norms";
	src: url("../fonts/tt-norms/TTNorms-Regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "TT Norms";
	src: url("../fonts/tt-norms/TTNorms-Medium.otf") format("opentype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "TT Norms";
	src: url("../fonts/tt-norms/TTNorms-Bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "TT Norms";
	src: url("../fonts/tt-norms/TTNorms-ExtraBold.otf") format("opentype");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "TT Norms";
	src: url("../fonts/tt-norms/TTNorms-Black.otf") format("opentype");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* 1. Design tokens ------------------------------------------------------- */
:root {
	/* Brand palette (from the brandbook) */
	--color-black: #000000;      /* Total Black */
	--color-ivory: #e5e4df;      /* Ivory       */
	--color-pistachio: #acb948;  /* Pistachio   */
	--color-white: #ffffff;      /* White       */

	/* Derived accent shades */
	--color-pistachio-dark: #94a13a;
	--color-pistachio-light: #c0cb73;

	/* Semantic — light surfaces (default page) */
	--color-bg: var(--color-white);
	--color-surface: var(--color-ivory);
	--color-text: var(--color-black);
	--color-muted: #8F8F8F;
	--color-border: #e2e2dc;
	--color-error: #d0342c;      /* form validation / error toasts */
	--color-primary: var(--color-pistachio);
	--color-primary-dark: var(--color-pistachio-dark);
	--color-accent: var(--color-pistachio);
	--color-accent-dark: var(--color-pistachio-dark);

	/* Semantic — dark surfaces (header, footer) */
	--color-dark: var(--color-black);
	--color-dark-surface: #141414;
	--color-on-dark: var(--color-white);
	--color-on-dark-muted: #9a9b95;
	--color-dark-border: rgba(255, 255, 255, 0.14);

	--font-base: "TT Norms", "Roboto", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: "TT Norms", var(--font-base);

	/* --- Type scale ------------------------------------------------------
	   Fixed steps (UI text). Every hard-coded font-size in this file maps to
	   one of these — do not introduce new one-off rem values. */
	--fs-3xs: 0.6875rem;  /* 11px — micro labels, table captions           */
	--fs-2xs: 0.75rem;    /* 12px — badges, chips, meta                    */
	--fs-xs: 0.8125rem;   /* 13px — eyebrows, legal, footer headings       */
	--fs-sm: 0.875rem;    /* 14px — secondary text, card meta              */
	--fs-md: 0.9375rem;   /* 15px — dense body copy inside cards           */
	--fs-base: 1rem;      /* 16px — body                                   */
	--fs-lg: 1.0625rem;   /* 17px — lead-ish body, small card titles       */
	--fs-xl: 1.125rem;    /* 18px — card titles                            */
	--fs-2xl: 1.25rem;    /* 20px — intros, large card titles              */
	--fs-3xl: 1.375rem;   /* 22px                                          */
	--fs-4xl: 1.5rem;     /* 24px                                          */
	--fs-5xl: 1.75rem;    /* 28px                                          */

	/* Fluid steps (headings). Three ramps only — display, section, block —
	   so headings stay proportional to each other at every viewport. */
	--fs-display: clamp(2.5rem, 5vw, 4rem);        /* page hero H1         */
	--fs-section-title: clamp(2rem, 4.5vw, 3.75rem); /* big section head   */
	--fs-h1: clamp(2.25rem, 4vw, 3.5rem);
	--fs-h2: clamp(1.75rem, 3vw, 2.5rem);
	--fs-heading-md: clamp(1.5rem, 2.5vw, 2rem);   /* block headings        */
	--fs-h3: clamp(1.375rem, 2vw, 1.75rem);
	--fs-heading-sm: clamp(1.125rem, 1.8vw, 1.5rem); /* sub-block headings  */
	--fs-h4: var(--fs-2xl);
	--fs-h5: var(--fs-lg);
	--fs-h6: var(--fs-md);

	--lh-base: 1.6;
	--lh-heading: 1.1;
	--lh-tight: 1.25;

	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 6rem;

	--container: 1600px;
	/* Horizontal breathing room used by .container and full-width header panels. */
	--container-gutter: clamp(var(--space-sm), 3vw, var(--space-lg));
	--header-h: 84px;

	/* Control sizing — buttons, inputs and the header action cluster all use
	   these so they align on a shared baseline. */
	--btn-h: 48px;
	--btn-h-sm: 40px;
	--btn-h-lg: 56px;
	--btn-px: 1.75rem;
	--btn-px-sm: 1.15rem;
	--btn-px-lg: 2.25rem;

	--radius: 0;
	--radius-pill: 999px;
	--shadow: 0 4px 16px rgba(20, 25, 35, 0.08);
	--transition: 0.2s ease;
}

/* 2. Reset --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

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

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

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

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

/* 3. Base & typography --------------------------------------------------- */
body {
	font-family: var(--font-base);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font-heading);
	line-height: var(--lh-heading);
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: var(--space-sm);
}

h1, .h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--fs-h2); letter-spacing: -0.01em; }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }
h5, .h5 { font-size: var(--fs-h5); }
h6, .h6 { font-size: var(--fs-h6); }

/* Visual heading classes carry no bottom margin by default so they can be
   dropped onto any element (spans, links) without disturbing layout. */
.h1, .h2, .h3, .h4, .h5, .h6 { margin-bottom: 0; }

/* Eyebrow — small uppercase pistachio label above a heading. */
.eyebrow,
.faculty-eyebrow {
	display: block;
	margin-bottom: var(--space-xs);
	color: var(--color-pistachio);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Section title — reusable big section heading. */
.section-title {
	font-size: var(--fs-h2);
	margin-bottom: var(--space-md);
}

/* Reusable section header (eyebrow + title + intro) — see
   template-parts/section-header.php. Used across home & inner sections. */
.section-head {
	margin-bottom: var(--space-lg);
}
.section-head__eyebrow { margin-bottom: var(--space-sm); }
.section-head__title {
	font-size: var(--fs-section-title);
	line-height: 1.05;
  padding-bottom:24px;
	margin-bottom: var(--space-sm);
	text-wrap: balance;
  position:relative;
}
.section-head__title:before{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:10rem;
  height:6px;
  background:var(--color-pistachio)
}
.section-head__title .text-accent { color: var(--color-pistachio); }
.section-head__text {
	margin-bottom: 0;
	color: var(--color-muted);
	font-size: var(--fs-2xl);
}
.section-head--center {
	margin-inline: auto;
	text-align: center;
}
.section-head--dark .section-head__title { color: var(--color-on-dark); }
.section-head--dark .section-head__text { color: var(--color-on-dark-muted); }

p, ul, ol { margin-bottom: var(--space-sm); }

a {
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--transition);
}
a:hover { color: var(--color-pistachio-dark); }

/* 4. Layout -------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	/* Breathing room grows with the viewport so content never hugs the edges. */
	padding-inline: clamp(var(--space-sm), 3vw, var(--space-lg));
}

.site-main {
	padding-block: 0;
}

/* Generic section spacing (home & inner content sections). */
.section { padding-block: var(--space-xl); }
.section--surface { background: var(--color-surface); }
.site-main--home { padding: 0; }

/* Full-bleed heroes lead their page flush under the header (cancel the
   site-main top padding). Applies to every inner landing/archive/single. */
.site-main > .page-hero:first-child,
.site-main > .teachers-hero:first-child,
.site-main > .faculty-hero:first-child { margin-top: calc(-1 * var(--space-lg)); }
/* Single news supplies its own header top spacing. */
.site-main--news-single { padding-top: 0; }

.posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--space-md);
}

/* 5. Header --------------------------------------------------------------
   Two states:
   • default  → white bar, dark text (every inner page)
   • on the front page → transparent overlay over the hero, light text;
     turns white once scrolled (.is-shrink). Transparent overlay is a
     desktop treatment; on mobile the bar is always white (see responsive).
   ------------------------------------------------------------------------- */
.site-header {
	border-bottom: 1px solid var(--color-border);
	background: var(--color-white);
	color: var(--color-text);
	position: sticky;
	top: 0;
	z-index: 100;
	transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.site-header.is-shrink {
	box-shadow: var(--shadow);
}
/* Header spans the full viewport width (overrides the .container max-width),
   keeping the standard side gutter. */
.site-header__inner {
	max-width: none;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-md);
	min-height: var(--header-h);
	transition: min-height var(--transition);
}
/* Right-hand cluster (search · language · login) pinned to the far edge. */
.site-actions { margin-left: auto; }
.site-header.is-shrink .site-header__inner { min-height: 64px; }

.site-title {
	font-size: var(--fs-2xl);
	font-weight: 700;
	color: var(--color-text);
}
.site-title:hover { color: var(--color-text); text-decoration: none; }
.custom-logo {
	max-height: 56px;
	width: auto;
	transition: max-height var(--transition);
}
.site-header.is-shrink .custom-logo { max-height: 44px; }

/* Logo never yields to the flex squeeze — it keeps its size while the nav is
   the element that gives way (it tightens with the viewport, then collapses to
   a burger below 1281px). */
.site-branding { flex: none; }

/* Two-variant site logo: dark on light backdrops, white on dark ones. */
.site-logo { display: block; align-items: center; }
.site-logo__img {
	display: block;
	height: 56px;
	width: auto;
	transition: height var(--transition);
}
.site-header.is-shrink .site-logo__img { height: 44px; }
/* Smaller logo on narrower screens (≤1440) to free up room in the bar. */
@media (max-width: 1440px) {
	.site-logo__img { height: 48px; }
	.site-header.is-shrink .site-logo__img { height: 42px; }
}
/* Default (solid header, mobile) shows the dark logo. */
.site-logo__img--light { display: none; }

/* Header right-hand actions cluster — never shrinks, so the language switcher
   and login stay whole while the nav is what gives way under a tight bar. */
.site-actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--space-sm);
}

/* Search — toggle in the bar, full-width premium panel drops from the header. */
.site-search { position: static; }
.site-search__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
	border-radius: var(--radius);
}
.site-search__toggle:hover { color: var(--color-pistachio-dark); }
.site-search__icon { width: 22px; height: 22px; }

/* Full-width premium search panel, aligned to the header content width. */
.site-search__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 30;
	padding: var(--space-lg) var(--container-gutter);
	background: var(--color-white);
	border-top: 1px solid var(--color-border);
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.site-search.is-open .site-search__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.site-search__form {
	display: block;
	max-width: 860px;
	margin-inline: auto;
}
.site-search__label {
	display: block;
	margin-bottom: var(--space-sm);
	color: var(--color-pistachio);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.site-search__field {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding-bottom: var(--space-sm);
	border-bottom: 2px solid var(--color-black);
}
.site-search__field-icon {
	flex: none;
	width: 26px;
	height: 26px;
	color: var(--color-muted);
}
/* Scoped under .site-search__field to outrank the generic input[type=search]
   form styling (attribute selector) and stay a clean underline field. */
.site-search__field .site-search__input {
	flex: 1;
	width: auto;
	min-width: 0;
	padding: 0.25rem 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--color-text);
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight: 500;
	line-height: 1.2;
}
.site-search__field .site-search__input:focus { outline: none; border: 0; }
.site-search__field .site-search__input::placeholder { color: var(--color-muted); }
.site-search__submit {
	flex: none;
	white-space: nowrap;
	padding: 0.7rem 1.75rem;
	border: 0;
	background: var(--color-black);
	color: var(--color-white);
	font-weight: 700;
	cursor: pointer;
	transition: background var(--transition);
}
.site-search__submit:hover { background: var(--color-pistachio-dark); }

/* Language switcher — compact dropdown: current language + caret, the full
   list drops on click/hover/focus. Kept narrow so it survives every viewport
   (the old segmented control clipped its last segment when the bar got tight).
   Reveal is driven by .is-open (JS) plus :hover / :focus-within so it still
   works with JS off. */
.lang-switch { position: relative; flex: none; }
.lang-switch__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	height: 44px;
	padding: 0 0.7rem;
	border: 1px solid var(--color-border);
	border-radius: 0;
	background: transparent;
	color: var(--color-text);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	cursor: pointer;
	transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.lang-switch__toggle:hover { color: var(--color-text); border-color: var(--color-text); }
.lang-switch__caret {
	width: 13px;
	height: 13px;
	flex: none;
	transition: transform var(--transition);
}
.lang-switch.is-open .lang-switch__caret,
.lang-switch:hover .lang-switch__caret,
.lang-switch:focus-within .lang-switch__caret { transform: rotate(180deg); }

.lang-switch__menu {
	position: absolute;
	/* Flush under the toggle — a gap here would be a dead zone that drops the
	   :hover state before the cursor reaches the menu. */
	top: 100%;
	right: 0;
	z-index: 40;
	min-width: 100%;
	margin: 0;
	padding: 0.3rem 0;
	list-style: none;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.lang-switch.is-open .lang-switch__menu,
.lang-switch:hover .lang-switch__menu,
.lang-switch:focus-within .lang-switch__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.lang-switch__option {
	display: block;
	padding: 0.55rem 1.1rem;
	color: var(--color-muted);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	white-space: nowrap;
	transition: color var(--transition), background var(--transition);
}
.lang-switch__option:hover { color: var(--color-text); background: var(--color-surface); }
.lang-switch__option.is-current { color: var(--color-text); background: var(--color-surface); }

/* Login button — black ghost button on the white header.
   Scoped under .site-actions so it wins over the generic .btn fill. */
.site-actions .site-login {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	/* Clear the generic .btn min-height (48px) so the login matches the 44px
	   language toggle sitting next to it. */
	height: 44px;
	min-height: 0;
	white-space: nowrap;
	background: transparent;
	color: var(--color-black);
	border: 1px solid var(--color-black);
	padding: 0 1.35rem;
	border-radius: var(--radius);
	font-weight: 700;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.site-login__icon { width: 18px; height: 18px; }
.site-actions .site-login:hover {
	background: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-black);
}

/* 5b. Transparent header on the front page (desktop overlay) ------------- */
@media (min-width: 1281px) {
	/* Pull the home hero up under the sticky transparent bar. */
	.site-header--transparent + .site-main--home,
	.site-header--transparent ~ .site-main--home {
		margin-top: calc(-1 * var(--header-h));
	}

	/* Same overlay treatment for the programme (faculty) hero: pull it fully
	   under the transparent bar so the hero image fills behind it. */
	.site-header--transparent ~ .site-main--faculty > .faculty-hero:first-child {
		margin-top: calc(-1 * var(--header-h));
		padding-top: calc(var(--header-h) + var(--space-lg));
	}

	.site-header--transparent:not(.is-shrink):not(:hover) {
		background: transparent;
		/* Hairline keeps the bar separated from the hero even when transparent. */
		border-bottom-color: rgba(255, 255, 255, 0.18);
		color: var(--color-on-dark);
	}
	/* Soft top scrim keeps light text legible over any hero image. */
	.site-header--transparent:not(.is-shrink):not(:hover)::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
		pointer-events: none;
	}
	.site-header--transparent:not(.is-shrink):not(:hover) .site-title { color: var(--color-on-dark); }
	/* Over a dark hero the header is transparent — swap to the white logo. */
	.site-header--transparent:not(.is-shrink):not(:hover) .site-logo__img--dark { display: none; }
	.site-header--transparent:not(.is-shrink):not(:hover) .site-logo__img--light { display: block; }
	.site-header--transparent:not(.is-shrink):not(:hover) .site-nav { border-left-color: rgba(255, 255, 255, 0.25); }
	.site-header--transparent:not(.is-shrink):not(:hover) .site-search__toggle { color: var(--color-on-dark); }
	.site-header--transparent:not(.is-shrink):not(:hover) .site-search__toggle:hover { color: var(--color-pistachio); }
	.site-header--transparent:not(.is-shrink):not(:hover) .site-nav__menu a,
	.site-header--transparent:not(.is-shrink):not(:hover) .site-nav__menu .mega-link__title,
	.site-header--transparent:not(.is-shrink):not(:hover) .site-nav__menu .mega-link__desc { color: var(--color-on-dark); }
	.site-header--transparent:not(.is-shrink):not(:hover) .site-nav__menu a:hover,
	.site-header--transparent:not(.is-shrink):not(:hover) .site-nav__menu a:hover .mega-link__title,
	.site-header--transparent:not(.is-shrink):not(:hover) .site-nav__menu .current-menu-item > a,
	.site-header--transparent:not(.is-shrink):not(:hover) .site-nav__menu .current-menu-item > a .mega-link__title { color: var(--color-pistachio); }
	.site-header--transparent:not(.is-shrink):not(:hover) .site-nav__menu .current-menu-item > a::after { background: var(--color-pistachio); }

	/* Only the toggle sits on the dark hero; the menu panel opens white below,
	   so its options keep the default dark-on-light styling. */
	.site-header--transparent:not(.is-shrink):not(:hover) .lang-switch__toggle {
		color: var(--color-on-dark);
		border-color: rgba(255, 255, 255, 0.4);
	}
	.site-header--transparent:not(.is-shrink):not(:hover) .lang-switch__toggle:hover {
		color: var(--color-on-dark);
		border-color: var(--color-on-dark);
	}

	.site-header--transparent:not(.is-shrink):not(:hover) .site-login {
		color: var(--color-on-dark);
		border-color: rgba(255, 255, 255, 0.6);
	}
	.site-header--transparent:not(.is-shrink):not(:hover) .site-login:hover {
		background: var(--color-white);
		color: var(--color-black);
		border-color: var(--color-white);
	}
}

/* 6. Navigation ---------------------------------------------------------- */
.site-nav { display: flex; align-items: center; }
/* Vertical divider between the logo and the menu (desktop). */
@media (min-width: 1281px) {
	.site-nav {
		margin-left: var(--space-xs);
		padding-left: var(--space-md);
		border-left: 1px solid var(--color-border);
	}
}
.site-nav__menu {
	display: flex;
	gap: var(--space-md);
	margin: 0;
}
.site-nav__menu a {
	position: relative;
	color: var(--color-text);
  line-height:1.05;
	font-weight: 500;
}
.site-nav__menu a:hover { color: var(--color-pistachio-dark); text-decoration: none; }
.site-nav__menu .current-menu-item > a { color: var(--color-text); }
.site-nav__menu .current-menu-item > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: var(--color-pistachio);
}

/* Dropdown submenus ------------------------------------------------------
   Markup comes from wp_nav_menu: .menu-item-has-children > .sub-menu.
   The injected .site-nav__submenu-toggle is a mobile-only accordion button. */
.site-nav__menu .sub-menu { list-style: none; margin: 0; padding: 0; }
.site-nav__submenu-toggle { display: none; }

/* Mega-card link internals — icon chip + title + description.
   Layout (flex/grid) is set per breakpoint below; these are the shared parts. */
.mega-link__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--color-surface);
	color: var(--color-pistachio-dark);
	transition: background var(--transition), color var(--transition);
}
.mega-link__icon svg { width: 24px; height: 24px; }
.mega-link__icon img { width: 24px; height: 24px; object-fit: contain; }
.mega-link__body { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.mega-link__title { font-weight: 700; line-height: 1.2; }
.mega-link__desc {
	font-size: var(--fs-sm);
	font-weight: 400;
	line-height: 1.35;
	color: var(--color-muted);
	overflow-wrap: anywhere;
}

@media (min-width: 1281px) {
	/* Stretch the nav to the full header height so dropdowns hang from the
	   bottom edge of the bar, not from mid-height. */
	.site-nav { align-self: stretch; }
	/* Fill the full bar height so a list dropdown's top:100% lands on the
	   header's bottom edge, not mid-bar (otherwise it rides up over the items). */
	.site-nav__menu { align-items: stretch; height: 100%; }
	.site-nav__menu > li { display: flex; align-items: center; }
	/* Parent items anchor their panel to the header (position:relative on
	   .site-header__inner), so the dropdown stretches the full content width. */
	.site-nav__menu .menu-item-has-children { position: static; }

	/* Caret on parent items (declared after the current-item underline so it
	   wins the shared ::after slot when an item is both current and a parent). */
	.site-nav__menu .menu-item-has-children > a { padding-right: 16px; }
	.site-nav__menu .menu-item-has-children > a::after {
		content: "";
		position: absolute;
		right: 0;
		/* Reset the current-item underline props that share this ::after slot,
		   so an active parent shows a clean caret (not a stretched box). */
		left: auto;
		bottom: auto;
		background: transparent;
		top: 50%;
		width: 6px;
		height: 6px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-70%) rotate(45deg);
		transition: transform var(--transition);
		opacity: 0.7;
	}
	.site-nav__menu .menu-item-has-children:hover > a::after,
	.site-nav__menu .menu-item-has-children:focus-within > a::after {
		transform: translateY(-30%) rotate(-135deg);
		opacity: 1;
	}

	/* Shared panel chrome + reveal animation (both flavours).
	   A pistachio hairline caps the panel and the shadow is layered (tight
	   contact shadow + wide ambient) so it reads as a raised sheet rather than
	   a flat grey blur. */
	.site-nav__menu .sub-menu {
		position: absolute;
		top: 100%;
		z-index: 30;
		background: var(--color-white);
		border-top: 2px solid var(--color-pistachio);
		box-shadow:
			0 1px 2px rgba(0, 0, 0, 0.06),
			0 12px 24px rgba(0, 0, 0, 0.08),
			0 40px 70px rgba(0, 0, 0, 0.12);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px) scale(0.995);
		transform-origin: top center;
		transition:
			opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
			transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0.28s;
	}
	.site-nav__menu .menu-item-has-children:hover > .sub-menu,
	.site-nav__menu .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0) scale(1);
	}
	.site-nav__menu .sub-menu a::after { content: none; }

	/* Items settle in just behind the panel — a short, tight stagger. */
	.site-nav__menu .sub-menu > li {
		opacity: 0;
		transform: translateY(6px);
		transition: opacity 0.3s ease, transform 0.3s ease;
	}
	.site-nav__menu .menu-item-has-children:hover > .sub-menu > li,
	.site-nav__menu .menu-item-has-children:focus-within > .sub-menu > li {
		opacity: 1;
		transform: translateY(0);
	}
	.site-nav__menu .sub-menu > li:nth-child(1) { transition-delay: 0.04s; }
	.site-nav__menu .sub-menu > li:nth-child(2) { transition-delay: 0.07s; }
	.site-nav__menu .sub-menu > li:nth-child(3) { transition-delay: 0.10s; }
	.site-nav__menu .sub-menu > li:nth-child(4) { transition-delay: 0.13s; }
	.site-nav__menu .sub-menu > li:nth-child(5) { transition-delay: 0.16s; }
	.site-nav__menu .sub-menu > li:nth-child(6) { transition-delay: 0.19s; }
	.site-nav__menu .sub-menu > li:nth-child(n+7) { transition-delay: 0.22s; }

	/* --- Mega panel (Программы обучения): full-bleed bar, cards in a
	   container-width grid, 3 per row. -------------------------------------- */
	.site-nav__menu .sub-menu--mega {
		left: 0;
		right: 0;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
		/* Full-bleed white bar, but keep the cards within the site container. */
		padding-block: var(--space-md);
		padding-inline: max(var(--container-gutter), calc((100% - var(--container)) / 2));
	}
	/* Cards lift on a tinted wash rather than just recolouring their title. */
	.site-nav__menu .sub-menu--mega a {
		position: relative;
		display: flex;
		align-items: center;               /* (1) center icon + text vertically */
		gap: var(--space-sm);
		padding: var(--space-sm);
		font-weight: 500;
		color: var(--color-text);
		transition: background var(--transition), color var(--transition), transform var(--transition);
	}
	/* Pistachio rule wipes in along the card's bottom edge on hover. */
	.site-nav__menu .sub-menu--mega a::before {
		content: "";
		position: absolute;
		left: var(--space-sm);
		right: var(--space-sm);
		bottom: 0;
		height: 2px;
		background: var(--color-pistachio);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.site-nav__menu .sub-menu--mega a:hover,
	.site-nav__menu .sub-menu--mega .current-menu-item > a,
	.site-nav__menu .sub-menu--mega .is-active > a { background: var(--color-surface); }
	.site-nav__menu .sub-menu--mega a:hover::before,
	.site-nav__menu .sub-menu--mega .current-menu-item > a::before,
	.site-nav__menu .sub-menu--mega .is-active > a::before { transform: scaleX(1); }

	/* (2)+(3) Large background icon, shown flat — no grey chip, no grey card. */
	.site-nav__menu .sub-menu--mega .mega-link__icon {
		background: transparent;
		width: 52px;
		height: 52px;
		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.site-nav__menu .sub-menu--mega .mega-link__icon img,
	.site-nav__menu .sub-menu--mega .mega-link__icon svg { width: 44px; height: 44px; }
	.site-nav__menu .sub-menu--mega a:hover .mega-link__icon { transform: scale(1.08); }
	.site-nav__menu .sub-menu--mega .mega-link__title { transition: color var(--transition); }
	.site-nav__menu .sub-menu--mega a:hover .mega-link__title,
	.site-nav__menu .sub-menu--mega .current-menu-item > a .mega-link__title,
	.site-nav__menu .sub-menu--mega .is-active > a .mega-link__title {
		color: var(--color-pistachio-dark);
	}

	/* --- List dropdown (everything else): compact single column anchored to
	   its own parent item. --------------------------------------------------- */
	.site-nav__menu > li.menu-item--list { position: relative; }
	.site-nav__menu .sub-menu--list {
		left: 0;
		min-width: 280px;
		max-width: 360px;
		padding: var(--space-sm) var(--space-xs);
		display: flex;
		flex-direction: column;
	}
	/* The row slides right off a growing pistachio rule, and a chevron fades in
	   at the trailing edge — the affordance the flat list was missing. */
	.site-nav__menu .sub-menu--list a {
		position: relative;
		display: block;
		padding: 0.7rem var(--space-md) 0.7rem var(--space-sm);
		font-weight: 500;
		line-height: 1.3;
		color: var(--color-text);
		transition: background var(--transition), color var(--transition), padding-left var(--transition);
	}
	.site-nav__menu .sub-menu--list a::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 2px;
		height: 0;
		background: var(--color-pistachio);
		transform: translateY(-50%);
		transition: height 0.26s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.site-nav__menu .sub-menu--list a::after {
		content: "→";
		position: absolute;
		right: var(--space-sm);
		top: 50%;
		/* Reset the current-item underline props that share this ::after slot,
		   so an active item shows a clean chevron (not a stretched pistachio
		   rule struck through the text). */
		left: auto;
		bottom: auto;
		width: auto;
		height: auto;
		background: transparent;
		transform: translateY(-50%) translateX(-6px);
		color: var(--color-pistachio-dark);
		opacity: 0;
		transition: opacity var(--transition), transform var(--transition);
	}
	.site-nav__menu .sub-menu--list .mega-link__desc { margin-top: 2px; }
	.site-nav__menu .sub-menu--list a:hover,
	.site-nav__menu .sub-menu--list .current-menu-item > a,
	.site-nav__menu .sub-menu--list .is-active > a {
		background: var(--color-surface);
		color: var(--color-text);
		padding-left: var(--space-md);
	}
	.site-nav__menu .sub-menu--list a:hover::before,
	.site-nav__menu .sub-menu--list .current-menu-item > a::before,
	.site-nav__menu .sub-menu--list .is-active > a::before { height: 60%; }
	.site-nav__menu .sub-menu--list a:hover::after {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}

	/* On the transparent front-page header the dropdown stays a solid card. */
	.site-header--transparent:not(.is-shrink):not(:hover) .site-nav__menu .sub-menu a { color: var(--color-text); }
	.site-header--transparent:not(.is-shrink):not(:hover) .site-nav__menu .sub-menu a:hover { color: var(--color-text); }
}

.site-nav__toggle {
	display: none;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	cursor: pointer;
	position: relative;
}
.site-nav__toggle-bar,
.site-nav__toggle-bar::before,
.site-nav__toggle-bar::after {
	content: "";
	position: absolute;
	left: 10px;
	width: 24px;
	height: 2px;
	background: var(--color-text);
	transition: transform var(--transition), opacity var(--transition);
}
.site-nav__toggle-bar { top: 21px; }
.site-nav__toggle-bar::before { top: -7px; }
.site-nav__toggle-bar::after { top: 7px; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar { background: transparent; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar::before { transform: translateY(7px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }

/* 7. Footer (dark) ------------------------------------------------------- */
.site-footer {
	background: var(--color-dark);
	color: var(--color-on-dark-muted);
	border-top: 1px solid var(--color-dark-border);
}
.site-footer__inner {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
	gap: var(--space-lg);
	padding-block: var(--space-xl);
}
.site-footer__heading {
	color: var(--color-pistachio);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: var(--space-md);
}

/* Brand column */
.site-footer__brand .custom-logo,
.site-footer__logo { margin-bottom: var(--space-md); }
.site-footer__logo {
	display: inline-block;
	font-size: var(--fs-2xl);
	font-weight: 800;
	color: var(--color-on-dark);
}
.site-footer__logo-img { display: block; height: 52px; width: auto; }
.site-footer__about {
	max-width: 34ch;
	color: var(--color-on-dark-muted);
	margin: 0;
}

/* LMS link in the contacts column */
.site-footer__lms {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--color-pistachio);
	font-weight: 600;
}
.site-footer__lms:hover { color: var(--color-pistachio-light); }

/* Contacts */
.contacts { list-style: none; margin: 0 0 var(--space-md); padding: 0; }
.contacts__item { margin-bottom: var(--space-xs); color: var(--color-on-dark-muted); }
.contacts__item a { color: var(--color-on-dark); }
.contacts__item a:hover { color: var(--color-pistachio); }
.contacts__item--address p { margin: 0; }

/* Social links */
.social-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}
.social-links__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius);
	background: transparent;
	border: 1px solid var(--color-dark-border);
	color: var(--color-on-dark);
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.social-links__link:hover {
	background: var(--color-pistachio);
	border-color: var(--color-pistachio);
	color: var(--color-black);
}
.social-links__link svg { width: 20px; height: 20px; fill: currentColor; }

/* Footer menu */
.site-footer__menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-footer__menu a { color: var(--color-on-dark); }
.site-footer__menu a:hover { color: var(--color-pistachio); }

/* Consultation form */
.consult-form { display: grid; gap: var(--space-sm); }
.consult-form input,
.consult-form textarea,
.consult-form select {
	background: var(--color-dark-surface);
	border-color: var(--color-dark-border);
	color: var(--color-on-dark);
}
.consult-form input::placeholder,
.consult-form textarea::placeholder { color: var(--color-on-dark-muted); }
.consult-form__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--space-xs);
	font-size: var(--fs-sm);
	color: var(--color-on-dark-muted);
}
.consult-form__consent input { width: auto; margin-top: 4px; }
.consult-form__consent a { color: var(--color-pistachio); }
.consult-form__submit { justify-self: start; }
.consult-form__message { margin: 0; font-size: var(--fs-md); }
.consult-form__message.is-success { color: var(--color-pistachio-light); }
.consult-form__message.is-error { color: #e2725b; }
.consult-form.is-loading .consult-form__submit { opacity: 0.6; pointer-events: none; }

/* Footer bottom bar */
.site-footer__bottom {
	border-top: 1px solid var(--color-dark-border);
	padding-block: var(--space-sm);
}
.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
}
.site-footer__copy { color: var(--color-on-dark-muted); margin: 0; }
.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-footer__legal a { color: var(--color-on-dark-muted); font-size: var(--fs-sm); }
.site-footer__legal a:hover { color: var(--color-pistachio); }

/* Back to top */
.back-to-top {
	position: fixed;
	right: var(--space-md);
	bottom: var(--space-md);
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--color-pistachio);
	color: var(--color-black);
	cursor: pointer;
	box-shadow: var(--shadow);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--transition), transform var(--transition), background var(--transition);
	z-index: 90;
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: var(--color-pistachio-dark); }
.back-to-top svg { width: 22px; height: 22px; }

/* 8. Buttons -------------------------------------------------------------
   One base + variants + sizes. Every button-ish control in the theme routes
   through this — header login, form submits, card CTAs. All variants share
   the same height/padding rhythm so they line up when sat side by side.

   Text on pistachio is BLACK, never white: #acb948 on #fff is 2.2:1 (fails
   WCAG AA), on #000 it is 9.4:1.
   ------------------------------------------------------------------------- */
.btn,
button[type="submit"],
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: var(--btn-h);
	padding: 0 var(--btn-px);
	background: var(--color-pistachio);
	color: var(--color-black);
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--transition), color var(--transition),
		border-color var(--transition), transform var(--transition);
}
.btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background: var(--color-pistachio-dark);
	color: var(--color-black);
	text-decoration: none;
	transform: translateY(-1px);
}
.btn:active,
button[type="submit"]:active,
input[type="submit"]:active { transform: translateY(0); }

/* Keyboard focus ring — visible on both light and dark surfaces. */
.btn:focus-visible,
button[type="submit"]:focus-visible,
input[type="submit"]:focus-visible {
	outline: 2px solid var(--color-pistachio);
	outline-offset: 3px;
}

.btn[disabled],
.btn.is-disabled,
button[type="submit"][disabled] {
	opacity: 0.5;
	pointer-events: none;
}

.btn__icon { flex: none; width: 18px; height: 18px; }

/* --- Variants ----------------------------------------------------------- */

/* Outline — black hairline on light surfaces. */
.btn--outline {
	background: transparent;
	color: var(--color-black);
	border-color: var(--color-black);
}
.btn--outline:hover {
	background: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-black);
}

/* Solid black — primary action on a pistachio or ivory surface. */
.btn--dark {
	background: var(--color-black);
	color: var(--color-on-dark);
}
.btn--dark:hover {
	background: var(--color-dark-surface);
	color: var(--color-pistachio);
}

/* Ghost on dark surfaces (hero, footer, dark bands). */
.btn--ghost-light {
	background: transparent;
	color: var(--color-on-dark);
	border-color: rgba(255, 255, 255, 0.6);
}
.btn--ghost-light:hover {
	background: var(--color-white);
	color: var(--color-black);
	border-color: var(--color-white);
}

/* Solid white — highest-contrast action on a dark band. */
.btn--light {
	background: var(--color-white);
	color: var(--color-black);
}
.btn--light:hover {
	background: var(--color-pistachio);
	color: var(--color-black);
}

/* Text/link button — no chrome, pistachio underline grows on hover. */
.btn--link {
	min-height: 0;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--color-black);
	border-bottom: 2px solid var(--color-pistachio);
}
.btn--link:hover {
	background: transparent;
	color: var(--color-pistachio-dark);
	transform: none;
}

/* --- Sizes -------------------------------------------------------------- */
.btn--sm { min-height: var(--btn-h-sm); padding-inline: var(--btn-px-sm); font-size: var(--fs-md); }
.btn--lg { min-height: var(--btn-h-lg); padding-inline: var(--btn-px-lg); font-size: var(--fs-lg); }
.btn--block { display: flex; width: 100%; }

/* 9. Entries / cards ----------------------------------------------------- */
.entry {
	background: var(--color-bg);
	margin-bottom: var(--space-lg);
}
.posts-grid .entry {
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 0;
	box-shadow: var(--shadow);
	display: flex;
	flex-direction: column;
}
.entry__thumb img { width: 100%; object-fit: cover; }
.posts-grid .entry__header,
.posts-grid .entry__content,
.posts-grid .entry__footer { padding-inline: var(--space-sm); }
.posts-grid .entry__header { padding-top: var(--space-sm); }
.posts-grid .entry__footer { padding-bottom: var(--space-sm); margin-top: auto; }

.entry__title { margin-bottom: var(--space-xs); }
.entry__title a { color: inherit; }
.entry__title a:hover { color: var(--color-primary); text-decoration: none; }
.entry__meta { color: var(--color-muted); font-size: var(--fs-sm); margin-bottom: var(--space-sm); }
.entry__more { font-weight: 600; }

/* 10. Forms -------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	width: 100%;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-bg);
	transition: border-color var(--transition);
}
input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-primary);
}
.search-form {
	display: flex;
	gap: var(--space-xs);
	max-width: 480px;
}

/* 11. Pages / page header ------------------------------------------------ */
.page-header { margin-bottom: var(--space-md); }
.page-header__desc { color: var(--color-muted); }

/* Inner-page header — breadcrumbs + H1 + subtitle on a dark band. Carries an
   optional background photo; without one the line pattern fills the right. */
.page-head {
	position: relative;
	overflow: hidden;
	background: var(--color-dark);
	color: var(--color-on-dark);
	padding-block: clamp(var(--space-lg), 7vw, var(--space-xl));
}
.page-head__pattern {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(46%, 560px);
	background: url("../images/patterns/reasons.svg") right center / contain no-repeat;
	/* The pattern is dark line art — flipped to read as light on the black band. */
	filter: invert(1);
	opacity: 0.5;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
.page-head__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.6;
	filter: grayscale(0.25);
}
/* Keeps the heading legible while letting the photo read on the right. */
.page-head--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--color-dark) 4%, rgba(0, 0, 0, 0.45) 52%, rgba(0, 0, 0, 0.12));
}
.page-head--photo { padding-block: clamp(var(--space-xl), 9vw, calc(var(--space-xl) * 1.5)); }
.page-head__inner { position: relative; z-index: 1; }
.page-head__content { max-width: 46rem; }
.page-head__title {
	font-size: var(--fs-h1);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--color-white);
	text-wrap: balance;
}
.page-head__title .text-accent { color: var(--color-pistachio); }
.page-head__subtitle {
	max-width: 52ch;
	margin: var(--space-sm) 0 0;
	font-size: var(--fs-2xl);
	color: var(--color-on-dark-muted);
}
/* Breadcrumbs sit on the dark band here, so they invert too. */
.page-head .breadcrumbs__item,
.page-head .breadcrumbs__link { color: var(--color-on-dark-muted); }
.page-head .breadcrumbs__item:not(:first-child)::before { color: var(--color-dark-border); }
.page-head .breadcrumbs__link:hover { color: var(--color-pistachio); }
.page-head .breadcrumbs__current { color: var(--color-white); }

/* Breadcrumbs. */
.breadcrumbs { margin-bottom: var(--space-sm); }
.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-sm);
}
.breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-muted);
}
.breadcrumbs__item:not(:first-child)::before {
	content: "/";
	color: var(--color-border);
}
.breadcrumbs__link { color: var(--color-muted); }
.breadcrumbs__link:hover { color: var(--color-pistachio-dark); }
.breadcrumbs__current { color: var(--color-text); font-weight: 600; }

.sidebar { margin-top: var(--space-md); }
.widget { margin-bottom: var(--space-md); }
.widget__title { font-size: var(--fs-xl); margin-bottom: var(--space-sm); }

/* Pagination */
.pagination,
.post-navigation { margin-top: var(--space-lg); }
.pagination .nav-links {
	display: flex;
	gap: var(--space-xs);
	flex-wrap: wrap;
}
.pagination .page-numbers {
	display: inline-flex;
	min-width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	padding-inline: 0.5rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-text);
}
.pagination .page-numbers.current {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

/* Scroll reveal ----------------------------------------------------------
   The [data-reveal] attribute is added by JS (see initReveal in main.js), so
   content is never hidden when JS is off or reduced motion is requested.
   --reveal-delay staggers items inside a grid or row. */
[data-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity 0.7s ease,
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: var(--reveal-delay, 0s);
	will-change: opacity, transform;
}
[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Hero (home) — dark full-bleed slider ----------------------------------- */
.hero {
	position: relative;
	min-height: 100svh;
	background: var(--color-black);
	color: var(--color-on-dark);
	overflow: hidden;
}
/* Swiper container fills the hero; each slide is a full-height flex box. */
.hero__swiper { position: relative; min-height: inherit; height: 100svh; }
.hero__swiper .swiper-wrapper { min-height: inherit; }

.hero__slide {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100svh;
	overflow: hidden;
}

/* Photo wrapper — full-bleed by default, half the slide in the split layout. */
.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
/* Background overlay effect over the photo — chosen per slide in ACF. */
.hero__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
/* Тёмное затемнение — legibility scrim (default). */
.hero__slide--overlay-dark::before {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.78) 100%);
}
/* Без затемнения — only a faint bottom fade so the slider UI stays readable. */
.hero__slide--overlay-none::before {
	background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
}
/* Кинематографический — editorial side scrim: deep behind the text column,
   clearing towards the right so the photo keeps its subject, with a soft
   letterbox top/bottom. */
.hero__slide--overlay-cinematic::before {
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.62) 34%, rgba(0, 0, 0, 0.14) 68%, rgba(0, 0, 0, 0.5) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, transparent 26%, transparent 68%, rgba(0, 0, 0, 0.6) 100%);
}
/* Матовое стекло — a frosted panel that blurs the photo behind the text and
   fades out past the content column. The ::before keeps a full-width scrim so
   the slider UI on the right stays readable; ::after carries the masked blur. */
.hero__slide--overlay-frost::before {
	background: linear-gradient(90deg, rgba(10, 12, 8, 0.5) 0%, rgba(10, 12, 8, 0.3) 50%, rgba(0, 0, 0, 0.42) 100%);
}
.hero__slide--overlay-frost::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: rgba(10, 12, 8, 0.28);
	-webkit-backdrop-filter: blur(16px) saturate(1.15);
	backdrop-filter: blur(16px) saturate(1.15);
	-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 76%);
	mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 76%);
}
/* Legacy values ("Зелёный градиент", "Виньетка") kept as aliases so slides
   saved before those choices were removed still render the default scrim. */
.hero__slide--overlay-gradient::before,
.hero__slide--overlay-vignette::before {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.78) 100%);
}
/* Диагональные линии — scrim + repeating diagonal stripes. */
.hero__slide--overlay-lines::before {
	background:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 9px),
		linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.72) 100%);
}
/* Сетка — scrim + fine grid pattern. */
.hero__slide--overlay-grid::before {
	background:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 44px 44px,
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 44px 44px,
		linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.32) 45%, rgba(0, 0, 0, 0.72) 100%);
}

.hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block: var(--space-xl);
}
/* Badge row — pistachio pill plus an optional note (date, time, place). */
.hero__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}
.hero__badge {
	display: inline-block;
	padding: 0.45rem 0.9rem;
	background: var(--color-pistachio);
	color: var(--color-black);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.hero__badge-meta {
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}
.hero__title {
	font-size: clamp(2.25rem, 6vw, 4.5rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--color-white);
	max-width: 18ch;
	margin-bottom: var(--space-md);
}
.hero__title .text-accent { color: var(--color-pistachio); }
.hero__subtitle {
	max-width: 46ch;
	font-size: var(--fs-lg);
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: var(--space-lg);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* Slide layouts — «Тип слайда» (ACF layout), set per slide ---------------
   fullscreen (default) → the photo fills the slide, copy sits over it.
   split                → copy on the black panel, photo on the right half.
   pattern              → copy on the black panel, «узор» on the right half.
   Split and pattern share the same geometry; only the right half differs.
   The copy column ends on the viewport midline: the container is centred, so
   half of its content box lands exactly there at every width. */
.hero__slide--split .hero__media,
.hero__pattern {
	position: absolute;
	inset: 0 0 0 50%;
	z-index: 0;
	overflow: hidden;
}
/* The right half carries its own visual and the copy already sits on black, so
   the photo overlay has nothing left to do here. The class is doubled to
   outweigh the .hero__slide--overlay-* rules above. */
.hero__slide.hero__slide--split::before,
.hero__slide.hero__slide--split::after,
.hero__slide.hero__slide--pattern::before,
.hero__slide.hero__slide--pattern::after {
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.hero__slide--split .hero__title,
.hero__slide--split .hero__subtitle,
.hero__slide--split .hero__actions,
.hero__slide--pattern .hero__title,
.hero__slide--pattern .hero__subtitle,
.hero__slide--pattern .hero__actions {
	max-width: calc(50% - var(--space-lg));
}
/* «Узор» panel — the line-art pattern over the brand pistachio. */
.hero__pattern { background: var(--color-pistachio); }
.hero__pattern::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/patterns/uzor.png") center / auto 100% repeat-x;
	opacity: 0.45;
}

/* Below the desktop ladder the two halves stack: visual on top, copy under.
   The slider keeps its fixed 80svh track, so the stacked slide has to fit into
   it: a shorter visual, tighter rhythm and the small button size. */
@media (max-width: 1024px) {
	.hero__slide--split,
	.hero__slide--pattern { align-items: flex-start; }
	.hero__slide--split .hero__media,
	.hero__slide--pattern .hero__pattern { inset: 0 0 auto 0; height: 26svh; }
	/* Bottom padding clears the dots/arrows row, which floats over the copy. */
	.hero__slide--split .hero__content,
	.hero__slide--pattern .hero__content {
		padding-top: calc(26svh + var(--space-md));
		padding-bottom: calc(var(--space-md) + var(--btn-h));
	}
	.hero__slide--split .hero__title,
	.hero__slide--split .hero__actions,
	.hero__slide--pattern .hero__title,
	.hero__slide--pattern .hero__actions { max-width: none; }
	.hero__slide--split .hero__eyebrow,
	.hero__slide--pattern .hero__eyebrow { margin-bottom: var(--space-sm); }
	.hero__slide--split .hero__title,
	.hero__slide--pattern .hero__title { margin-bottom: var(--space-sm); }
	.hero__slide--split .hero__subtitle,
	.hero__slide--pattern .hero__subtitle {
		max-width: 46ch;
		margin-bottom: var(--space-md);
	}
	/* Compact controls keep both CTAs on one line instead of stacking. */
	.hero__slide--split .hero__actions,
	.hero__slide--pattern .hero__actions { gap: var(--space-xs); }
	.hero__slide--split .hero__actions .btn,
	.hero__slide--pattern .hero__actions .btn {
		min-height: var(--btn-h-sm);
		padding-inline: var(--btn-px-sm);
		font-size: var(--fs-md);
	}
}

/* Slide entrance — the active slide's copy fades and rises in, staggered, and
   its photo eases out of a slow push-in. Scoped to `.swiper-initialized` so the
   content stays visible if Swiper never boots (JS off / script error). */
.hero__swiper.swiper-initialized .hero__slide .hero__eyebrow,
.hero__swiper.swiper-initialized .hero__slide .hero__title,
.hero__swiper.swiper-initialized .hero__slide .hero__subtitle,
.hero__swiper.swiper-initialized .hero__slide .hero__actions {
	opacity: 0;
	transform: translateY(30px);
}
.hero__swiper.swiper-initialized .hero__slide.swiper-slide-active .hero__eyebrow,
.hero__swiper.swiper-initialized .hero__slide.swiper-slide-active .hero__title,
.hero__swiper.swiper-initialized .hero__slide.swiper-slide-active .hero__subtitle,
.hero__swiper.swiper-initialized .hero__slide.swiper-slide-active .hero__actions {
	animation: hero-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero__swiper.swiper-initialized .hero__slide.swiper-slide-active .hero__eyebrow { animation-delay: 0.05s; }
.hero__swiper.swiper-initialized .hero__slide.swiper-slide-active .hero__title { animation-delay: 0.15s; }
.hero__swiper.swiper-initialized .hero__slide.swiper-slide-active .hero__subtitle { animation-delay: 0.3s; }
.hero__swiper.swiper-initialized .hero__slide.swiper-slide-active .hero__actions { animation-delay: 0.45s; }

@keyframes hero-rise {
	to { opacity: 1; transform: none; }
}

.hero__swiper.swiper-initialized .hero__slide.swiper-slide-active .hero__bg {
	animation: hero-push-in 8s ease-out forwards;
}
@keyframes hero-push-in {
	from { transform: scale(1.08); }
	to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__swiper.swiper-initialized .hero__slide .hero__eyebrow,
	.hero__swiper.swiper-initialized .hero__slide .hero__title,
	.hero__swiper.swiper-initialized .hero__slide .hero__subtitle,
	.hero__swiper.swiper-initialized .hero__slide .hero__actions {
		opacity: 1;
		transform: none;
		animation: none;
	}
	.hero__swiper.swiper-initialized .hero__slide.swiper-slide-active .hero__bg { animation: none; }
}
.hero__cta { display: inline-flex; align-items: center; gap: 0.6rem; }
.hero__cta-arrow { transition: transform var(--transition); }
.hero__cta:hover .hero__cta-arrow { transform: translateX(4px); }

/* Slider UI — dots (bottom-left) + arrows (bottom-right) */
.hero__ui {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--space-lg);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
}
/* Pagination — Swiper bullets, styled as pistachio pills. The el sits inside
   .hero__ui, so override Swiper's default absolute positioning back to static. */
.hero__dots.swiper-pagination {
	position: static;
	display: flex;
	align-items: center;
	gap: 8px;
	width: auto;
}
.hero__dots .swiper-pagination-bullet {
	width: 28px;
	height: 4px;
	margin: 0;
	padding: 0;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.35);
	opacity: 1;
	cursor: pointer;
	transition: background var(--transition), width var(--transition);
}
.hero__dots .swiper-pagination-bullet:hover { background: rgba(255, 255, 255, 0.6); }
.hero__dots .swiper-pagination-bullet-active { width: 44px; background: var(--color-pistachio); }

.hero__arrows { display: flex; gap: var(--space-xs); }
.hero__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--radius);
	background: rgba(0, 0, 0, 0.35);
	color: var(--color-white);
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.hero__arrow:hover {
	background: var(--color-pistachio);
	border-color: var(--color-pistachio);
	color: var(--color-black);
}
.hero__arrow svg { width: 22px; height: 22px; }

/* On narrower screens (≤1440) drop the dots + arrows closer to the bottom edge
   so they clear the hero copy/CTA above them. */
@media (max-width: 1440px) {
	.hero__ui { bottom: var(--space-sm); }
}

/* .btn--ghost-light lives in section 8 with the rest of the button system. */

@media (min-width: 1281px) {
	.hero__content { padding-top: calc(var(--header-h) + var(--space-lg)); }
}

/* 11a1. Home — «Программы обучения» (directions) ------------------------- */
.directions__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-xs);
}
.dir-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 360px;
	padding: var(--space-md);
	overflow: hidden;
	color: var(--color-on-dark);
	background: var(--color-dark-surface);
	isolation: isolate;
}
.dir-card:hover { color: var(--color-on-dark); }
.dir-card__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform 0.5s ease;
}
.dir-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.85) 100%);
	transition: background var(--transition);
}
.dir-card:hover .dir-card__bg { transform: scale(1.05); }
.dir-card:hover::before {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(23, 28, 12, 0.55) 45%, rgba(23, 28, 12, 0.92) 100%);
}
/* Pistachio frame on hover/focus to echo the active-card look in the design. */
.dir-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border: 2px solid transparent;
	pointer-events: none;
	transition: border-color var(--transition);
}
.dir-card:hover::after,
.dir-card:focus-visible::after { border-color: var(--color-pistachio); }

.dir-card__icon {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 1;
	display: inline-flex;
	width: 44px;
	height: 44px;
}
.dir-card__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: brightness(0) invert(1);
}
.dir-card__body { position: relative; z-index: 1; }
.dir-card__title {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--fs-3xl);
	font-weight: 700;
	line-height: 1.15;
}
.dir-card__text {
	display: block;
	margin-top: var(--space-xs);
	font-size: var(--fs-md);
	color: rgba(255, 255, 255, 0.82);
	/* Reveal the blurb on hover; keep titles aligned by default. */
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.35s ease, opacity 0.35s ease, margin-top 0.35s ease;
}
.dir-card:hover .dir-card__text,
.dir-card:focus-visible .dir-card__text {
	max-height: 8rem;
	opacity: 1;
}

/* 11a2. Home — «5 причин» (reasons, vertical Swiper) --------------------- */
.reasons {
	--reasons-pattern: url("../images/patterns/reasons.svg");
	position: relative;
	color: var(--color-on-dark);
	background-color: var(--color-black);
	overflow: hidden;
}
/* Decorative background pattern (replaceable — drop a file at the path in
   --reasons-pattern, or override the variable). Anchored to the left and faded
   out toward the centre so the right (slider) half stays clean. */
.reasons::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--reasons-pattern);
	background-repeat: no-repeat;
	background-position: left center;
	opacity: 1;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 62%);
	mask-image: linear-gradient(90deg, #000 0%, #000 34%, transparent 62%);
}
.reasons__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-xl);
	align-items: center;
}
.reasons__aside { max-width: 50ch; }
.reasons__number {
	display: block;
	font-family: var(--font-heading);
	font-size: clamp(5rem, 10vw, 8.5rem);
	font-weight: 900;
	line-height: 0.9;
	color: var(--color-pistachio);
}
.reasons__title {
	font-size: var(--fs-h1);
	color: var(--color-on-dark);
	margin-bottom: var(--space-md);
}
.reasons__title .text-accent { color: var(--color-pistachio); }
.reasons__text {
	margin-bottom: 0;
	font-size: var(--fs-xl);
	color: var(--color-on-dark-muted);
}

/* Custom vertical carousel (no Swiper). Exactly three slides in view — the
   centred active one plus a neighbour above and below. The JS (initReasons)
   translates .reasons__track by whole rows; uniform row height keeps it exact. */
.reasons__slider {
	position: relative;
	width: 100%;
	padding-right: var(--space-lg);
}
.reasons__viewport {
	position: relative;
	/* Fallback height for no-JS; initReasons sets the real value from measured
	   content so the active row is never clipped. */
	height: 420px;
	overflow: hidden;
	/* Gentle fade at the very edges to hint the list continues. */
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.reasons__track {
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
}
.reasons__track.is-animating { transition: transform 0.5s ease; }
/* Used for the seamless loop seam — jump + swap active state with no animation. */
.reasons__track.is-instant .reason,
.reasons__track.is-instant .reason__text { transition: none; }

.reason {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Rows are content-sized now: a title-only row when inactive, growing to fit
	   the full text when active. The padding sets the gap between titles. */
	padding: 0.85rem 0;
	overflow: hidden;
	cursor: pointer;
	/* Inactive rows sit dimmed & slightly smaller; active grows from the left. */
	transform: scale(0.9);
	transform-origin: left center;
	opacity: 0.5;
	transition: transform 0.4s ease, opacity 0.4s ease;
}
.reason__title {
	font-family: var(--font-heading);
	font-size: var(--fs-heading-md);
	font-weight: 700;
	line-height: 1.12;
	color: rgba(255, 255, 255, 0.45);
	transition: color var(--transition);
}
.reason__text {
	margin-top: 0;
	font-size: var(--fs-xl);
	color: var(--color-on-dark-muted);
	/* Collapsed on inactive rows so the title stays vertically centred — the
	   row height itself stays fixed via .reason. Expands only when active. */
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: max-height 0.4s ease, margin-top 0.4s ease, opacity 0.35s ease, visibility 0.35s ease;
}
.reason.is-active {
	transform: scale(1);
	opacity: 1;
}
.reason.is-active .reason__title { color: var(--color-white); }
.reason.is-active .reason__text {
	margin-top: var(--space-sm);
	/* Generous no-JS fallback; JS sets the exact px height for smooth open/close. */
	max-height: 40rem;
	opacity: 1;
	visibility: visible;
}

/* Progress indicator — separate vertical dots on the right. */
.reasons__dots {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.reasons__dot {
	width: 4px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.25);
	cursor: pointer;
	transition: background var(--transition), height var(--transition);
}
.reasons__dot:hover { background: rgba(255, 255, 255, 0.5); }
.reasons__dot.is-active {
	height: 32px;
	background: var(--color-pistachio);
}

/* 11b. Single faculty (programme) ---------------------------------------- */
.faculty-section {
	padding-top: var(--space-xl);
  padding-bottom: var(--space-md);
	border-bottom: 1px solid var(--color-border);
	scroll-margin-top: 8.5rem;
}
.faculty-section--surface { background: var(--color-surface); }

/* .faculty-eyebrow is styled globally (section 3); on a programme page it takes
   the programme's accent colour instead of the fixed pistachio. */
.faculty-eyebrow { color: var(--program-accent, var(--color-pistachio)); }
.faculty-section__title {
	font-size: var(--fs-section-title);
	line-height: 1.05;
	margin-bottom: var(--space-lg);
	padding-bottom: 24px;
	position: relative;
	text-wrap: balance;
}
.faculty-section__title::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 10rem;
	height: 6px;
	background: var(--program-accent);
}
.faculty-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
	flex-wrap: wrap;
}
.faculty-section__head .faculty-section__title { margin-bottom: 0; }

.faculty-link {
	font-weight: 600;
	white-space: nowrap;
}
.faculty-link span { transition: transform var(--transition); display: inline-block; }
.faculty-link:hover span { transform: translateX(4px); }

/* Hero */
.faculty-hero {
	position: relative;
	display: flex;
	align-items: stretch;
	min-height: 460px;
	padding-block: var(--space-xl);
	background: var(--color-surface);
	overflow: hidden;
}
.faculty-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.faculty-hero--media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 25, 35, 0.15) 0%, rgba(20, 25, 35, 0.78) 100%);
	z-index: 1;
}
.faculty-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: space-between;
	gap: var(--space-md);
	width: 100%;
}
/* Breadcrumbs are pinned to the top of the hero; the content block below is
   pushed to the bottom by the column's space-between. */
.faculty-hero__content { margin-top: auto; }
.faculty-hero__content { max-width: 720px; }
.faculty-hero--media .faculty-hero__title,
.faculty-hero--media .faculty-hero__lead { color: #fff; }

/* Breadcrumbs — uppercase, light over the media backdrop. */
.faculty-hero__crumbs { margin-bottom: var(--space-md); }
.faculty-hero__crumbs .breadcrumbs__list {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--fs-2xs);
}
.faculty-hero--media .faculty-hero__crumbs .breadcrumbs__item,
.faculty-hero--media .faculty-hero__crumbs .breadcrumbs__link { color: rgba(255, 255, 255, 0.65); }
.faculty-hero--media .faculty-hero__crumbs .breadcrumbs__item:not(:first-child)::before { color: rgba(255, 255, 255, 0.35); }
.faculty-hero__crumbs .breadcrumbs__link:hover { color: rgba(255, 255, 255,1);transition:.3s; }
.faculty-hero__crumbs .breadcrumbs__current { color: rgba(255, 255, 255,0.85); }

/* Tag row — badge + meta line. */
.faculty-hero__tags {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	margin-bottom: var(--space-sm);
}
.faculty-hero__badge {
	display: inline-block;
	padding: 0.4rem 0.85rem;
	background: var(--program-accent);
	color: var(--color-white);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.faculty-hero__meta {
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}
.faculty-hero:not(.faculty-hero--media) .faculty-hero__meta { color: var(--color-muted); }

.faculty-hero__title { font-size: var(--fs-h1); margin-bottom: var(--space-md); }
.faculty-hero__title .text-accent { color: var(--program-accent); }
.faculty-hero__lead {
	max-width: 48ch;
	font-size: var(--fs-xl);
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: var(--space-md);
}
.faculty-hero:not(.faculty-hero--media) .faculty-hero__lead { color: var(--color-muted); }

.faculty-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}
.faculty-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--program-accent);
	color: var(--color-white);
}
.faculty-hero__cta:hover {
	background: color-mix(in srgb, var(--program-accent) 85%, #000);
	color: var(--color-white);
}
.faculty-hero__arrow { transition: transform var(--transition); }
.faculty-hero__cta:hover .faculty-hero__arrow { transform: translateX(4px); }
.faculty-hero__ghost { padding: 0.85rem 1.75rem; }
.faculty-hero--media .faculty-hero__ghost {
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.6);
}
.faculty-hero--media .faculty-hero__ghost:hover {
	background: var(--color-white);
	color: var(--color-black);
	border-color: var(--color-white);
}
/* In-page navigation — sticky anchor bar under the hero. */
.faculty-nav {
	position: sticky;
	top: 64px;
	z-index: 90;
	/* Slim glass bar: translucent so content faintly shows through when stuck. */
	background: color-mix(in srgb, var(--color-white) 80%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(1.5);
	backdrop-filter: blur(16px) saturate(1.5);
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 12px 26px -22px rgba(0, 0, 0, 0.55);
}
.faculty-nav__list {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0.35rem 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}
.faculty-nav__list::-webkit-scrollbar { display: none; }
.faculty-nav__item { flex-shrink: 0; }
.faculty-nav__item--cta { margin-left: auto; padding-left: var(--space-sm); }
/* Segmented tab: fills with the programme accent when active. */
.faculty-nav__link {
	display: inline-block;
	padding: 0.5rem 0.9rem;
	color: var(--color-muted);
	font-size: var(--fs-sm);
	font-weight: 600;
	white-space: nowrap;
	border: 1px solid transparent;
	transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}
.faculty-nav__link:hover {
	color: var(--color-text);
	background: color-mix(in srgb, var(--program-accent) 12%, transparent);
	border-color: color-mix(in srgb, var(--program-accent) 22%, transparent);
}
.faculty-nav__link.is-active {
	color: var(--color-white);
	background: var(--program-accent);
	border-color: var(--program-accent);
}
.faculty-nav__apply {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1.1rem;
	background: var(--program-accent);
	color: var(--color-white);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
	box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--program-accent) 85%, transparent);
	transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.faculty-nav__apply::after {
	content: "\2192";
	font-weight: 500;
	transition: transform var(--transition);
}
.faculty-nav__apply:hover {
	background: color-mix(in srgb, var(--program-accent) 85%, #000);
	color: var(--color-white);
	transform: translateY(-1px);
}
.faculty-nav__apply:hover::after { transform: translateX(3px); }

/* Head of department */
.faculty-head__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--space-lg);
	margin-bottom: var(--space-xl);
}
.faculty-head__title {
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: 1.1;
	margin: 0;
	padding-bottom: var(--space-md);
	position: relative;
}
.faculty-head__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3rem;
	height: 2px;
	background: var(--program-accent);
}
.faculty-head__person { flex-shrink: 0; text-align: right; }
.faculty-head__name { font-weight: 700; margin-bottom: 0; }
.faculty-head__name a { color: inherit; }
.faculty-head__name a:hover { color: var(--program-accent); }
.faculty-head__position {
	color: var(--color-muted);
	font-size: var(--fs-2xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 0;
}
.faculty-head__main {
	display: grid;
	grid-template-columns: minmax(0, 340px) 1fr;
	gap: var(--space-lg);
	align-items: start;
}
.faculty-head__media {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--color-border);
}
.faculty-head__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
}
.faculty-head__text { color: var(--color-text); max-width: 68ch; }
.faculty-head__text p { margin-bottom: var(--space-sm); }
.faculty-head__text p:last-child { margin-bottom: 0; }

/* Collapsible prose — «Читать далее». Only clamped once JS adds
   .is-clampable, so text is never hidden without a way to open it.
   The fade is a mask on the text itself, so it works on any background. */
.text-clamp__body { position: relative; }
.text-clamp.is-clampable .text-clamp__body {
	overflow: hidden;
	transition: max-height 0.4s ease;
}
.text-clamp.is-clampable:not(.is-open) .text-clamp__body {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 5rem), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 5rem), transparent);
}
.text-clamp__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--space-sm);
	padding: 0;
	border: 0;
	background: none;
	color: var(--program-accent, var(--color-text));
	font: inherit;
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}
/* `display` on the class would otherwise beat the browser's [hidden] rule and
   leave a dead button under text that was never clamped. */
.text-clamp__toggle[hidden] { display: none; }
.text-clamp__toggle:hover { opacity: 0.7; }
.text-clamp__toggle-icon {
	width: 1.1em;
	height: 1.1em;
	transition: transform 0.25s ease;
}
.text-clamp.is-open .text-clamp__toggle-icon { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
	.text-clamp.is-clampable .text-clamp__body,
	.text-clamp__toggle-icon { transition: none; }
}

/* Programme monogram badge — shared by the hero and the about panel. */
.program-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--radius-pill);
	background: var(--program-accent);
	color: var(--color-white);
	font-weight: 700;
	line-height: 1;
	overflow: hidden;
}
.program-badge img {
	width: 58%;
	height: 58%;
	object-fit: contain;
}

/* About + facts */
.faculty-about { position: relative; overflow: hidden; }
.faculty-about__bg-icon {
	position: absolute;
	right: clamp(-2rem, -1vw, 0rem);
	bottom: clamp(-3rem, -2vw, -1rem);
	width: clamp(200px, 28vw, 420px);
	height: auto;
	opacity: 0.08;
	pointer-events: none;
	z-index: 0;
}
.faculty-about .container { position: relative; z-index: 1; }
.faculty-about__head { margin-bottom: var(--space-lg); }
.faculty-about__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
	align-items: start;
}
.faculty-about__title {
	font-size: var(--fs-section-title);
	line-height: 1.05;
	margin-bottom: var(--space-md);
	padding-bottom: 24px;
	position: relative;
	text-wrap: balance;
}
.faculty-about__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 10rem;
	height: 6px;
	background: var(--program-accent);
}
.faculty-about__text { color: var(--color-muted); }
/* The prose sits inside .text-clamp__body (see compas_read_more_open()), so the
   lead-paragraph rules target that wrapper as well as a bare paragraph. */
.faculty-about__text > p:first-child,
.faculty-about__text .text-clamp__body > p:first-child {
	font-size: var(--fs-3xl);
	line-height: 1.4;
	color: var(--color-text);
	margin-bottom: var(--space-md);
}
.faculty-about__text > p,
.faculty-about__text .text-clamp__body > p { margin-bottom: var(--space-sm); }

.faculty-about__facts { position: relative; }
.faculty-facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--color-border);
}
.faculty-facts__item {
	padding: var(--space-md) var(--space-sm) var(--space-md) 0;
	border-bottom: 1px solid var(--color-border);
}
.faculty-facts__item:nth-child(odd) {
	border-right: 1px solid var(--color-border);
	padding-right: var(--space-md);
}
.faculty-facts__item:nth-child(even) { padding-left: var(--space-md); }
.faculty-facts__value {
	display: block;
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin-bottom: var(--space-xs);
}
.faculty-facts__label {
	display: block;
	color: var(--color-muted);
	font-size: var(--fs-2xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.faculty-about__badge {
	position: absolute;
	right: -1rem;
	bottom: -1rem;
	width: 4rem;
	height: 4rem;
	font-size: var(--fs-4xl);
	box-shadow: var(--shadow);
}

/* Curriculum */
.faculty-curriculum__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--space-xl);
}
.faculty-course {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem 0.75rem;
	margin-inline: -0.75rem;
	border-top: 1px solid var(--color-border);
	transition: background var(--transition);
}
/* Accent line that grows in from the left along the top border on hover. */
.faculty-course::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	height: 2px;
	width: 0;
	background: var(--program-accent);
	transition: width 0.35s ease;
}
.faculty-course:hover { background: color-mix(in srgb, var(--program-accent) 7%, transparent); }
.faculty-course:hover::before { width: 100%; }
.faculty-course__icon {
	flex-shrink: 0;
	display: inline-flex;
}
.faculty-course__icon svg {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--program-accent);
	transition: transform var(--transition);
}
.faculty-course:hover .faculty-course__icon svg { transform: translateX(4px); }
.faculty-course__title {
	font-size: var(--fs-base);
	font-weight: 500;
	margin: 0;
	line-height: 1.35;
	transition: transform var(--transition), color var(--transition);
}
.faculty-course:hover .faculty-course__title {
	transform: translateX(6px);
	color: var(--program-accent);
}

/* Mentors */
.faculty-mentors__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--space-md);
}
.faculty-mentor__link { display: block; color: inherit; text-align: center; }
.faculty-mentor__link:hover { text-decoration: none; }
.faculty-mentor__photo {
	position: relative;
	display: block;
	aspect-ratio: 1;
	margin-bottom: var(--space-xs);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-border);
}
.faculty-mentor__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter var(--transition);
}
.faculty-mentor__link:hover .faculty-mentor__photo img { filter: grayscale(0); }
.faculty-mentor__photo-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 2.5rem;
	color: var(--color-muted);
	opacity: 0.45;
}
.faculty-mentor__name { font-size: var(--fs-sm); font-weight: 600; }
.faculty-mentor__position {
	display: block;
	margin-top: 2px;
	font-size: var(--fs-xs);
	color: var(--color-muted);
	line-height: 1.3;
}
/* Collapsed mentors list — show the first two desktop rows (12 items); the
   «Развернуть список» button reveals the rest. The 12 mirrors $mentor_limit in
   template-parts/faculty/mentors.php. */
.faculty-mentors__list--collapsible.is-collapsed .faculty-mentor:nth-child(n+13) {
	display: none;
}
.faculty-mentors__more {
	margin-top: var(--space-md);
	text-align: center;
}

/* Facilities — image cards with text overlaid on a dark gradient. */
.faculty-facilities__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-xs);
}
.faculty-facility {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-dark-surface);
}
.faculty-facility__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition);
}
.faculty-facility:hover .faculty-facility__img { transform: scale(1.04); }
.faculty-facility__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--space-md);
	background: linear-gradient(180deg, rgba(20, 25, 35, 0) 40%, rgba(20, 25, 35, 0.85) 100%);
	color: var(--color-white);
}
.faculty-facility__title { font-size: var(--fs-xl); color: var(--color-white); margin-bottom: 0.25rem; }
.faculty-facility__text { color: rgba(255, 255, 255, 0.8); font-size: var(--fs-md); margin-bottom: 0; }

/* Student works */
.faculty-works__filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-bottom: var(--space-md);
}
.faculty-works__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-sm);
}
@media (max-width: 1024px) { .faculty-works__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .faculty-works__grid { grid-template-columns: repeat(2, 1fr); } }
.faculty-works__item[hidden] { display: none; }
.faculty-works__link {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-surface, #f2f2f2);
	color: inherit;
	text-decoration: none;
}
.faculty-works__media { display: block; width: 100%; height: 100%; }
.faculty-works__link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--transition);
}
.faculty-works__link:hover img { transform: scale(1.06); }

/* Year — pill tag over the top-left corner of the photo. */
.faculty-works__year {
	position: absolute;
	top: var(--space-xs);
	left: var(--space-xs);
	z-index: 2;
	padding: 0.2rem 0.6rem;
	border-radius: var(--radius-pill);
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(4px);
	color: var(--color-white, #fff);
	font-size: var(--fs-2xs);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* Bottom gradient scrim carrying the performer's name. */
.faculty-works__overlay {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	padding: var(--space-lg) var(--space-sm) var(--space-sm);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 100%);
}
.faculty-works__name {
	color: var(--color-white, #fff);
	font-weight: 600;
	font-size: var(--fs-md);
	line-height: 1.25;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Gallery — full-bleed horizontal strip that drifts on scroll. */
.faculty-gallery {
	overflow: hidden;
	padding-block: var(--space-lg);
	scroll-margin-top: 8.5rem;
}
.faculty-gallery__track {
	display: flex;
	gap: var(--space-sm);
	width: max-content;
	padding-inline: var(--container-gutter);
	will-change: transform;
}
.faculty-gallery__item {
	display: block;
	flex: 0 0 auto;
	height: clamp(220px, 30vw, 440px);
	overflow: hidden;
	cursor: zoom-in;
	background: var(--color-surface);
}
.faculty-gallery__item img {
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: cover;
	transition: transform var(--transition);
}
.faculty-gallery__item:hover img { transform: scale(1.03); }

/* Lightbox — built by initLightbox() in main.js. */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 12, 16, 0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition), visibility var(--transition);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
/* Stage — swaps between an image, a video file and an oembed iframe. */
.lightbox__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 92vw;
	max-width: 92vw;
}
.lightbox__img,
.lightbox__video {
	max-width: 92vw;
	max-height: 86vh;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.lightbox__img { margin-inline: auto; }
.lightbox__video { width: min(92vw, 1280px); }
/* Oembed markup carries its own dimensions — force it into a 16:9 box. */
.lightbox__embed {
	position: relative;
	width: min(92vw, 1280px);
	aspect-ratio: 16 / 9;
	max-height: 86vh;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.lightbox__embed--vertical {
	width: auto;
	height: min(86vh, 60rem);
	aspect-ratio: 9 / 16;
}
.lightbox__embed iframe,
.lightbox__embed video,
.lightbox__embed embed,
.lightbox__embed object {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.lightbox__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border: 0;
	cursor: pointer;
	font-size: var(--fs-5xl);
	line-height: 1;
	transition: background var(--transition);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox__prev { left: var(--space-md); }
.lightbox__next { right: var(--space-md); }
.lightbox__close { top: var(--space-md); right: var(--space-md); transform: none; width: 2.75rem; height: 2.75rem; }
.lightbox__counter {
	position: absolute;
	bottom: var(--space-md);
	left: 0;
	right: 0;
	text-align: center;
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--fs-sm);
}
@media (max-width: 768px) {
	.lightbox__prev { left: var(--space-xs); }
	.lightbox__next { right: var(--space-xs); }
}

/* 11c1. Faculty — Видео о программе -------------------------------------- */
.faculty-video__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-md);
	/* Fallback (5+ videos): three per row. */
	grid-template-columns: repeat(3, 1fr);
}
/* Layout tuned to the number of videos (1–4). */
.faculty-video__grid--1 { grid-template-columns: minmax(0, 900px); justify-content: center; }
.faculty-video__grid--2 { grid-template-columns: repeat(2, 1fr); }
.faculty-video__grid--3 { grid-template-columns: repeat(3, 1fr); }
.faculty-video__grid--4 { grid-template-columns: repeat(2, 1fr); } /* 2×2 reads better than 4 in a thin row */
.faculty-video__item { display: flex; flex-direction: column; gap: var(--space-sm); }
.faculty-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--color-black);
	overflow: hidden;
	border-radius: var(--radius);
}
/* Force any embed (ACF oembed iframe) or the native player to fill the frame. */
.faculty-video__frame iframe,
.faculty-video__frame video,
.faculty-video__frame embed,
.faculty-video__frame object {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
	display: block;
	object-fit: cover;
}
/* Facade: click-to-load poster shown until the player is swapped in (JS). */
.faculty-video__facade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	cursor: pointer;
	background-color: var(--color-black);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.faculty-video__facade::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.15);
	transition: background var(--transition);
}
.faculty-video__facade:hover::after,
.faculty-video__facade:focus-visible::after { background: rgba(0, 0, 0, 0.3); }
.faculty-video__facade--blank::after { background: rgba(255, 255, 255, 0.04); }
.faculty-video__play {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--color-black);
	transform: translate(-50%, -50%);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), background var(--transition);
}
.faculty-video__play svg { width: 28px; height: 28px; margin-left: 3px; }
.faculty-video__facade:hover .faculty-video__play,
.faculty-video__facade:focus-visible .faculty-video__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--program-accent, var(--color-pistachio));
}
.faculty-video__title {
	margin: 0;
	font-weight: 600;
	font-size: var(--fs-h5);
}

/* 11c2. Faculty — promo band (shared by «Экскурсия» + «Поступление») ------ */
.faculty-promo {
	position: relative;
	overflow: hidden;
	scroll-margin-top: 8.5rem;
	background: var(--color-dark);
	color: var(--color-on-dark);
	/* Accent wash bleeding in from the corner behind the content. */
	background-image: radial-gradient(60% 120% at 88% 0%, color-mix(in srgb, var(--program-accent, var(--color-pistachio)) 26%, transparent) 0%, transparent 60%);
}
/* Decorative pattern strip pinned to the left edge, full section height. */
.faculty-promo__pattern {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: clamp(180px, 50%, 768px);
	background: url("../images/patterns/bg-1.svg") left center / contain no-repeat;
	opacity: 1;
	pointer-events: none;
	/* Fade the pattern into the band on its right edge so text stays legible. */
}

/* Big faint programme monogram parked in the corner. */
.faculty-promo__glyph {
	position: absolute;
	right: 2%;
	bottom: 0;
	width: clamp(14rem, 26vw, 24rem);
	aspect-ratio: 1;
	opacity: 0.06;
	pointer-events: none;
	display: grid;
	place-items: center;
	font-size: clamp(10rem, 22vw, 20rem);
	font-weight: 700;
	line-height: 1;
	color: var(--color-white);
}
.faculty-promo__glyph img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
.faculty-promo__glyph span { font-size: inherit; }

.faculty-promo__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: clamp(var(--space-md), 5vw, var(--space-xl));
	padding-block: var(--space-xl);
}
.faculty-promo__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: var(--space-sm);
	font-size: var(--fs-h6);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--program-accent, var(--color-pistachio));
}
.faculty-promo__eyebrow::before {
	content: "";
	width: 2.25rem;
	height: 2px;
	background: var(--program-accent, var(--color-pistachio));
}
.faculty-promo__title {
	color: var(--color-on-dark);
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
	margin: 0 0 var(--space-sm);
	text-wrap: balance;
}
.faculty-promo__title .text-accent { color: var(--program-accent, var(--color-pistachio)); }
.faculty-promo__text {
	margin: 0;
	color: var(--color-on-dark-muted);
	max-width: 46ch;
	font-size: var(--fs-h5);
}
.faculty-promo__perks {
	list-style: none;
	margin: var(--space-md) 0 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
	max-width: 46ch;
}
.faculty-promo__perk {
	position: relative;
	padding-left: 2.25rem;
	line-height: 1.35;
}
.faculty-promo__perk::before {
	content: "";
	position: absolute;
	left: 0;
	top: -0.05em;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: var(--radius-pill);
	/* accent circle with a white check drawn on top */
	background: var(--program-accent, var(--color-pistachio))
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.74 8.25-8.25 1.4 1.42z'/%3E%3C/svg%3E")
		center / 1rem no-repeat;
}

/* Contacts row (apply band) — accent-tinted phone / email. */
.faculty-promo__contacts {
	list-style: none;
	margin: var(--space-md) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm) var(--space-lg);
}
.faculty-promo__contact { display: flex; align-items: center; gap: 0.6rem; }
.faculty-promo__contact::before {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	background-color: var(--program-accent, var(--color-pistachio));
	-webkit-mask: var(--pc-ico) center / contain no-repeat;
	mask: var(--pc-ico) center / contain no-repeat;
}
.faculty-promo__contact--phone { --pc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.9 15.9 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .58 3.6 1 1 0 0 1-.25 1l-2.23 2.2z'/%3E%3C/svg%3E"); }
.faculty-promo__contact--email { --pc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm0 3.2V18h16V7.2l-8 5-8-5zM18.4 6H5.6l6.4 4z'/%3E%3C/svg%3E"); }
.faculty-promo__contact a { color: var(--color-on-dark); font-weight: 600; }
.faculty-promo__contact a:hover { color: var(--program-accent, var(--color-pistachio)); }

/* Form card — sits on the dark band with an accent top edge. */
.faculty-promo__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--color-dark-border);
	border-top: 3px solid var(--program-accent, var(--color-pistachio));
	padding: clamp(var(--space-md), 3vw, var(--space-lg));
}
.faculty-promo__form-title {
	margin: 0;
	font-size: var(--fs-h4);
	font-weight: 600;
}
.faculty-promo__fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md) var(--space-sm);
}
.faculty-promo__form .cta-field { gap: 8px; }
.faculty-promo__form .cta-field__label {
	font-size: var(--fs-xs);
	letter-spacing: 0.04em;
	color: var(--color-on-dark-muted);
}
.faculty-promo__form .cta-field input {
	width: 100%;
	padding: 0.75rem 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--color-dark-border);
	color: var(--color-on-dark);
	font: inherit;
}
.faculty-promo__form .cta-field input::placeholder { color: var(--color-on-dark-muted); }
.faculty-promo__form .cta-field input:focus { outline: none; border-bottom-color: var(--program-accent, var(--color-pistachio)); }
.faculty-promo__submit { align-self: start; }
.faculty-promo__note { margin: 0; font-size: var(--fs-sm); color: var(--color-on-dark-muted); }
.faculty-promo .consult-form__message { margin: 0; font-size: var(--fs-md); }
.faculty-promo .consult-form__message.is-success { color: var(--color-pistachio-light); }
.faculty-promo .consult-form__message.is-error { color: #ff8a80; }

/* 11c3. Faculty — Анонсы и новости программы (two columns) ---------------- */
.faculty-news__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
}
.faculty-news .news-col__title { font-size: var(--fs-h4); }
.faculty-news .news-item__date--event::before { background: var(--program-accent, var(--color-pistachio)); }
.faculty-news .news-item__link:hover .news-item__title { color: var(--program-accent, var(--color-pistachio-dark)); }

/* Read-only field (e.g. the locked programme name on the apply form). */
.faculty-promo__form .cta-field input[readonly] {
	color: var(--color-on-dark-muted);
	cursor: default;
	border-bottom-style: dashed;
}

/* Submit button follows the programme accent (like the hero button).
   Qualified with the element so it outranks the base `button[type="submit"]`
   rule in section 8 (more specific than a lone class). */
button.faculty-promo__submit {
	background: var(--program-accent, var(--color-pistachio));
	color: var(--color-white);
}
button.faculty-promo__submit:hover {
	background: color-mix(in srgb, var(--program-accent, var(--color-pistachio)) 85%, #000);
	color: var(--color-white);
}

@media (max-width: 1024px) {
	.faculty-promo__inner { grid-template-columns: 1fr; gap: var(--space-md); }
	.faculty-news__cols { grid-template-columns: 1fr; gap: var(--space-lg); }
	/* 3+ videos: drop to two per row on tablets. */
	.faculty-video__grid--3,
	.faculty-video__grid--4,
	.faculty-video__grid { grid-template-columns: repeat(2, 1fr); }
	.faculty-video__grid--1 { grid-template-columns: minmax(0, 900px); }
}
@media (max-width: 768px) {
	.faculty-video__grid,
	.faculty-video__grid--1,
	.faculty-video__grid--2,
	.faculty-video__grid--3,
	.faculty-video__grid--4 { grid-template-columns: 1fr; }
	.faculty-promo__fields { grid-template-columns: 1fr; }
}

/* 11d. Teachers — home block «Люди, которые вас научат» + archive --------- */
/* Shared 6-per-row grid of square photo cards. */
.teachers-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--space-sm);
}
.teacher-card { min-width: 0; }
.teacher-card__link {
	position: relative;
	display: block;
	color: inherit;
	isolation: isolate;
}
.teacher-card__link:hover { text-decoration: none; }
.teacher-card__photo {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--color-border);
}
.teacher-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter var(--transition), transform 0.5s ease;
}
.teacher-card__link:hover .teacher-card__photo img {
	filter: grayscale(0);
	transform: scale(1.04);
}

/* Home variant — name overlaid on the photo (see mock «КОМАНДА»). */
.teachers .teacher-card__meta {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--space-sm) var(--space-xs) var(--space-xs);
	background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.75) 100%);
	color: var(--color-white);
}
.teachers .teacher-card__name { font-size: var(--fs-md); font-weight: 700; line-height: 1.2; }
.teachers .teacher-card__position,
.teachers .teacher-card__status { display: none; }
/* Heading row — title on the left, «Все преподаватели» on the right. */
.teachers__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--space-md);
	flex-wrap: wrap;
	margin-bottom: var(--space-lg);
}
.teachers__head .section-head { margin-bottom: 0; }
.teachers__head-more { flex: 0 0 auto; margin-bottom: var(--space-sm); }

/* Archive hero — dark, with stats. */
.teachers-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 460px;
	/* The hero runs flush under the fixed header, so the top padding has to
	   clear it before the eyebrow starts. */
	padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-lg);
	background: var(--color-dark);
	color: var(--color-on-dark);
	overflow: hidden;
}
.teachers-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.5;
	z-index: 0;
}
.teachers-hero--media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.85) 100%);
	z-index: 1;
}
.teachers-hero__inner { position: relative; z-index: 2; }
.teachers-hero .eyebrow { color: var(--color-pistachio); }
.teachers-hero__title {
	font-size: var(--fs-section-title);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--color-white);
	margin-bottom: var(--space-sm);
}
.teachers-hero__title .text-accent { color: var(--color-pistachio); }
.teachers-hero__lead {
	max-width: 60ch;
	font-size: var(--fs-xl);
	color: var(--color-on-dark-muted);
	margin-bottom: var(--space-lg);
}
.teachers-hero__stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-lg);
}
.teachers-stat__value {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: 800;
	line-height: 1;
	color: var(--color-pistachio);
}
.teachers-stat__label {
	display: block;
	margin-top: 6px;
	max-width: 18ch;
	font-size: var(--fs-sm);
	color: var(--color-on-dark-muted);
}

/* Filters — teachers archive uses chip rows; the works archive uses the
   compact dropdown bar defined below. */
.teachers-filter,
.works-filter { margin-bottom: var(--space-lg); }
.teachers-filter__row {
	display: flex;
	align-items: baseline;
	gap: var(--space-md);
	padding-block: var(--space-sm);
	border-top: 1px solid var(--color-border);
}
.teachers-filter__row:last-of-type { border-bottom: 1px solid var(--color-border); }
.teachers-filter__label {
	flex: 0 0 auto;
	min-width: 7rem;
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
}
.teachers-filter__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}
.filter-chip {
	padding: 0.4rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-text);
	font-size: var(--fs-xs);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filter-chip:hover { border-color: var(--color-text); }
.filter-chip.is-active {
	background: var(--color-black);
	border-color: var(--color-black);
	color: var(--color-white);
}
.teachers-filter__count {
	margin: var(--space-sm) 0 0;
	font-size: var(--fs-sm);
	color: var(--color-muted);
}

/* Works archive — one compact bar of dropdowns instead of stacked chip rows. */
.works-filter__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
	padding-block: var(--space-sm);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}
.works-filter__count {
	margin: 0 0 0 auto;
	font-size: var(--fs-sm);
	color: var(--color-muted);
}

.filter-select { position: relative; }
.filter-select__toggle {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
	transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.filter-select__toggle:hover { border-color: var(--color-text); }
.filter-select__label {
	font-size: var(--fs-3xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
}
.filter-select__value {
	font-size: var(--fs-xs);
	font-weight: 600;
	max-width: 14ch;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.filter-select__chevron {
	align-self: center;
	width: 0.85rem;
	height: 0.85rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--transition);
}
.filter-select.is-open .filter-select__chevron { transform: rotate(180deg); }

/* A narrowed facet reads as active even while its menu is shut. */
.filter-select.is-set .filter-select__toggle {
	background: var(--color-black);
	border-color: var(--color-black);
	color: var(--color-white);
}
.filter-select.is-set .filter-select__label { color: rgba(255, 255, 255, 0.6); }

.filter-select__menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	min-width: 100%;
	max-width: min(22rem, 80vw);
	max-height: 18rem;
	overflow-y: auto;
	padding: 0.35rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-white);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
}
.filter-select__menu[hidden] { display: none; }
.filter-select__option {
	padding: 0.5rem 0.7rem;
	border: 0;
	border-radius: calc(var(--radius) - 2px);
	background: transparent;
	color: var(--color-text);
	font-size: var(--fs-xs);
	font-weight: 500;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--transition);
}
.filter-select__option:hover { background: var(--color-surface); }
.filter-select__option.is-active { font-weight: 700; background: var(--color-surface); }

.filter-reset {
	padding: 0.5rem 0.75rem;
	border: 0;
	background: transparent;
	color: var(--color-muted);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.filter-reset:hover { color: var(--color-text); }
.filter-reset[hidden] { display: none; }

@media (max-width: 768px) {
	.works-filter__count { margin-left: 0; width: 100%; }
	.filter-select { flex: 1 1 auto; }
	.filter-select__toggle { width: 100%; justify-content: space-between; }
}
.works-grid__empty {
	margin: var(--space-lg) 0 0;
	color: var(--color-muted);
}

/* Archive card variant — meta below the photo, department badge overlaid. */
.teachers-grid--archive { gap: var(--space-md) var(--space-sm); }
.teacher-card__dept {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	padding: 0.3rem 0.6rem;
	background: var(--color-black);
	color: var(--color-white);
	font-size: var(--fs-3xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
/* Default card layout — name over position over status, stacked under the
   photo. The home page overlays its own variant via the more specific
   `.teachers .teacher-card__meta` rules above. */
.teacher-card__meta {
	display: block;
	padding-top: var(--space-xs);
}
.teacher-card__name {
	display: block;
	font-size: var(--fs-base);
	font-weight: 700;
	line-height: 1.25;
}
.teacher-card__position {
	display: block;
	margin-top: 4px;
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--color-pistachio-dark);
}
.teacher-card__status {
	display: block;
	margin-top: 2px;
	font-size: var(--fs-2xs);
	color: var(--color-muted);
}
/* Stand-in for the many people who have no photo yet. */
.teacher-card__photo-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 2.5rem;
	color: var(--color-muted);
	opacity: 0.45;
}
.teacher-card[hidden] { display: none; }
.teachers-grid__empty { padding: var(--space-lg) 0; color: var(--color-muted); }

/* Vacancy CTA — dark band. */
.teachers-vacancy {
	background: var(--color-dark);
	color: var(--color-on-dark);
	padding-block: var(--space-xl);
}
.teachers-vacancy__inner {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--space-xl);
	align-items: start;
}
.teachers-vacancy .eyebrow { color: var(--color-pistachio); }
.teachers-vacancy__title {
	font-size: var(--fs-h1);
	color: var(--color-white);
	margin-bottom: var(--space-sm);
}
.teachers-vacancy__title .text-accent { color: var(--color-pistachio); }
.teachers-vacancy__text {
	max-width: 44ch;
	color: var(--color-on-dark-muted);
	margin-bottom: var(--space-md);
}
.teachers-vacancy__contacts {
	list-style: none;
	margin: 0 0 var(--space-md);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}
.teachers-vacancy__contacts a { color: var(--color-pistachio); font-weight: 600; }
.teachers-vacancy__contacts a:hover { color: var(--color-pistachio-light); }
.teachers-vacancy__offer {
	border: 1px solid var(--color-dark-border);
	padding: var(--space-md);
}
.teachers-vacancy__offer-title {
	display: block;
	margin-bottom: var(--space-sm);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-pistachio);
}
.teachers-vacancy__perks { list-style: none; margin: 0; padding: 0; }
.teachers-vacancy__perks li {
	position: relative;
	padding: 0.5rem 0 0.5rem 1.75rem;
	border-bottom: 1px solid var(--color-dark-border);
	color: var(--color-on-dark);
	font-size: var(--fs-md);
}
.teachers-vacancy__perks li:last-child { border-bottom: 0; }
.teachers-vacancy__perks li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--color-pistachio);
	font-weight: 700;
}

/* 11e. Home — partners marquee ------------------------------------------- */
.section--tight { padding-block: var(--space-lg); }
.marquee {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	display: flex;
	width: 100%;
}
.marquee__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: clamp(var(--space-lg), 7vw, var(--space-xl));
	padding-inline: clamp(var(--space-lg), 3.5vw, var(--space-xl));
	animation: marquee-scroll 120s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { flex: 0 0 auto; }
.partner {
	display: inline-flex;
	align-items: center;
	height: 56px;
}
.partner__logo {
	width: auto;
	height: 100%;
	max-height: 56px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.6;
	transition: filter var(--transition), opacity var(--transition);
}
.partner:hover .partner__logo { filter: grayscale(0); opacity: 1; }
@keyframes marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
	.marquee__track { animation: none; }
	.marquee { justify-content: center; flex-wrap: wrap; }
	.marquee__track:nth-child(2) { display: none; }
}

/* 11f. Home — «Анонсы и новости» ----------------------------------------- */
.events-news__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
}
.news-col__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-md);
	padding-bottom: var(--space-sm);
	margin-bottom: var(--space-md);
	border-bottom: 2px solid var(--color-text);
}
.news-col__title { font-size: var(--fs-heading-md); margin-bottom: 0; }
.news-col__all {
	flex: 0 0 auto;
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
}
.news-col__all:hover { color: var(--color-text); }
.news-col__all span { display: inline-block; transition: transform var(--transition); }
.news-col__all:hover span { transform: translateX(4px); }
.news-list { list-style: none; margin: 0; padding: 0; }
.news-item { border-bottom: 1px solid var(--color-border); }
.news-item:last-child { border-bottom: 0; }
.news-item__link {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: var(--space-md);
	align-items: start;
	padding-block: var(--space-md);
	color: inherit;
}
.news-item__link:hover { color: inherit; }
.news-item__thumb {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--color-border);
}
.news-item__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.news-item__link:hover .news-item__thumb img { transform: scale(1.04); }
.news-item__date {
	display: block;
	margin-bottom: 6px;
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-pistachio-dark);
}
/* Announcement cards show the event date with a calendar glyph. */
.news-item__date--event {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.news-item__date--event::before {
	content: "";
	width: 13px;
	height: 13px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm12 7v10H5V9h14z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v2H5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zm12 7v10H5V9h14z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.news-item__title {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--fs-2xl);
	font-weight: 700;
	line-height: 1.2;
	transition: color var(--transition);
}
.news-item__link:hover .news-item__title { color: var(--color-pistachio-dark); }
.news-item__text {
	display: block;
	margin-top: 6px;
	font-size: var(--fs-sm);
	color: var(--color-muted);
}
/* Below 640px the home news list drops the excerpt — date + title only —
   and tightens the row padding so items sit closer together. */
@media (max-width: 640px) {
	.events-news .news-item__text { display: none; }
	.events-news .news-item__link { padding-block: var(--space-sm); }
}
.news-col__empty { color: var(--color-muted); padding-block: var(--space-md); }

/* 11g. Home — «Работы студентов» (portfolio) ----------------------------- */
/* Heading row (shared with .teachers__head): title left, action right. */
.works__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--space-md);
	flex-wrap: wrap;
	margin-bottom: var(--space-lg);
}
.works__head .section-head { margin-bottom: 0; }
.works__head-more { flex: 0 0 auto; margin-bottom: var(--space-sm); }
/* On narrow screens the short title shoves the button to the far edge and it
   reads as cramped — stack the row and let the button span the full width. */
@media (max-width: 640px) {
	.works__head { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
	.works__head-more { width: 100%; margin-bottom: 0; }
}
.works-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-sm);
}
.work-card { min-width: 0; }
.work-card__link { display: block; color: inherit; }
.work-card__link:hover { color: inherit; text-decoration: none; }
.work-card__poster {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--color-surface);
}
.work-card__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.work-card__link:hover .work-card__poster img { transform: scale(1.04); }
.work-card__poster::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.28) 28%, rgba(0, 0, 0, 0) 55%);
	pointer-events: none;
}
.work-card__name {
	position: absolute;
	left: var(--space-sm);
	right: var(--space-sm);
	bottom: var(--space-sm);
	z-index: 1;
	color: var(--color-white);
	font-weight: 700;
	font-size: var(--fs-base);
	line-height: 1.2;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.work-card__year {
	position: absolute;
	top: var(--space-sm);
	left: var(--space-sm);
	z-index: 1;
	padding: 0.15rem 0.5rem;
	border-radius: var(--radius-pill);
	background: rgba(0, 0, 0, 0.55);
	color: var(--color-white);
	font-size: var(--fs-2xs);
	line-height: 1.4;
}

/* Video badge — shared by every works grid (home, faculty, archive, related).
   Marks a card whose work contains at least one playable video. */
.work-badge {
	position: absolute;
	top: var(--space-sm);
	right: var(--space-sm);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: var(--color-white);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	pointer-events: none;
	transition: background var(--transition), color var(--transition), transform var(--transition);
}
.work-badge svg { width: 1rem; height: 1rem; fill: currentColor; margin-left: 2px; }
.work-card__link:hover .work-badge,
.faculty-works__link:hover .work-badge {
	background: var(--color-pistachio);
	color: var(--color-black);
	transform: scale(1.08);
}

/* Work media story — photo / video / text blocks in editor order ---------- */
/* Blocks stack full width — a poster-style work needs the room; the gallery
   inside a photo block is what tiles. */
.work-media {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-lg);
	align-items: start;
}
.work-media__block { position: relative; margin: 0; }

/* Sequence number — badge on the media, repeated in the caption. */
.work-media__num {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	padding: 0.3rem 0.55rem;
	background: var(--color-black);
	color: var(--color-white);
	font-size: var(--fs-3xs);
	font-weight: 700;
	letter-spacing: 0.06em;
}
.work-media__caption-num {
	margin-right: 0.5rem;
	font-weight: 700;
	color: var(--color-text);
}
.work-media__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}
.work-media__thumb {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	aspect-ratio: 4 / 3;
	cursor: zoom-in;
}
.work-media__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.work-media__thumb:hover img { transform: scale(1.04); }

/* Hover: the image itself zooms and a glass magnifier badge slides in — no
   dark veil over the work, the photo stays true to colour. */
.work-media__zoom {
	position: absolute;
	right: var(--space-xs);
	bottom: var(--space-xs);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	backdrop-filter: blur(8px) saturate(1.3);
	-webkit-backdrop-filter: blur(8px) saturate(1.3);
	opacity: 0;
	transform: translateY(6px) scale(0.94);
	transition: opacity var(--transition), transform var(--transition);
	pointer-events: none;
}
.work-media__zoom svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: var(--color-black);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.work-media__thumb:hover .work-media__zoom,
.work-media__thumb:focus-visible .work-media__zoom,
.work-single__cover-link:hover .work-media__zoom,
.work-single__cover-link:focus-visible .work-media__zoom {
	opacity: 1;
	transform: translateY(0) scale(1);
}

@media (hover: none) {
	.work-media__zoom { display: none; }
}

/* A video block spans the full column and keeps a cinematic ratio. */
.work-media__video .work-media__thumb--video { aspect-ratio: 16 / 9; }
/* Video keeps a dark plate — the poster is dimmed behind the play badge. */
.work-media__video .work-media__thumb--video { background: var(--color-black); }
.work-media__thumb--video img { opacity: 0.85; }
.work-media__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: var(--color-white);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: background var(--transition), color var(--transition), transform var(--transition);
}
.work-media__play svg { width: 1.75rem; height: 1.75rem; fill: currentColor; margin-left: 3px; }
.work-media__thumb--video:hover .work-media__play {
	background: var(--color-pistachio);
	color: var(--color-black);
	transform: translate(-50%, -50%) scale(1.06);
}
.work-media__caption {
	margin-top: var(--space-xs);
	color: var(--color-muted);
	font-size: var(--fs-sm);
}
.work-media__text .prose { max-width: 68ch; }

/* PDF presentation — a download card, not a preview: works are often heavy
   scans and an inline viewer would cost far more than the click. */
.work-doc {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-sm);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: inherit;
	transition: border-color var(--transition), background var(--transition);
}
.work-doc:hover,
.work-doc:focus-visible {
	border-color: var(--color-black);
	background: var(--color-surface);
}
.work-doc__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
}
.work-doc__icon svg { width: 100%; height: 100%; }
.work-doc__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.work-doc__title { font-weight: 700; overflow-wrap: anywhere; }
.work-doc__meta {
	font-size: var(--fs-2xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
}
.work-doc__arrow { margin-left: auto; flex: none; }
.work-doc:hover .work-doc__arrow { transform: translateX(3px); }

@media (max-width: 768px) {
	.work-media { gap: var(--space-md); }
}

/* Work archive */
.site-main--work-archive { padding-block: var(--space-xl); }

/* 11h. Home — FAQ -------------------------------------------------------- */
.faq__inner {
	display: grid;
	gap: var(--space-md);
}
.faq__head { margin-bottom: 0; }
.faq-list { border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding-block: var(--space-sm);
	font-family: var(--font-heading);
	font-size: var(--fs-base);
	line-height: 1.35;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	transition: color var(--transition);
}
.faq-item__q:hover { color: var(--color-pistachio-dark); }
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__icon {
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

/* Two columns from tablet up: heading parked on the left, list on the right. */
@media (min-width: 1281px) {
	.faq__inner {
		/* 40% + 50% — the leftover 10% is the gutter between the columns. */
		grid-template-columns: 40% 50%;
		justify-content: space-between;
		column-gap: 0;
		align-items: start;
	}
	.faq__head { position: sticky; top: calc(var(--header-h) + var(--space-md)); }
}
.faq-item__icon::before,
.faq-item__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	background: var(--color-pistachio-dark);
	transform: translate(-50%, -50%);
	transition: transform var(--transition), opacity var(--transition);
}
.faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-item__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(0); }
.faq-item__a {
	color: var(--color-muted);
	font-size: var(--fs-md);
	max-width: 68ch;
}
/* JS animates the height of this wrapper, so its own box must stay empty. */
.faq-list[data-faq-js] .faq-item__a { overflow: hidden; }
.faq-item__a-inner { padding-bottom: var(--space-sm); }
.faq-item__a p { margin-bottom: var(--space-xs); }
.faq-item__a p:last-child { margin-bottom: 0; }

/* 11i. Home — CTA «Заявка на поступление» -------------------------------- */
.cta {
	position: relative;
	padding-block: var(--space-xl);
	background: var(--color-dark);
	color: var(--color-on-dark);
	overflow: hidden;
}
/* Faint decorative line-art (shared with the reasons section). */
.cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/patterns/reasons.svg") left center / contain no-repeat;
	opacity: 0.06;
	pointer-events: none;
}
.cta__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(var(--space-lg), 5vw, var(--space-xl));
	align-items: center;
}
.cta .eyebrow { color: var(--color-pistachio); }
.cta__title {
	font-size: var(--fs-section-title);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--color-white);
	margin-bottom: var(--space-md);
}
.cta__title .text-accent { color: var(--color-pistachio); }
.cta__text {
	max-width: 42ch;
	font-size: var(--fs-xl);
	color: var(--color-on-dark-muted);
	margin-bottom: var(--space-lg);
}
.cta__contacts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.cta__contact { display: flex; align-items: center; gap: var(--space-sm); }
.cta__contact::before {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: var(--color-pistachio);
	-webkit-mask: var(--cta-ico) center / contain no-repeat;
	mask: var(--cta-ico) center / contain no-repeat;
}
.cta__contact--phone { --cta-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.9 15.9 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .58 3.6 1 1 0 0 1-.25 1l-2.23 2.2z'/%3E%3C/svg%3E"); }
.cta__contact--email { --cta-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm0 3.2V18h16V7.2l-8 5-8-5zM18.4 6H5.6l6.4 4z'/%3E%3C/svg%3E"); }
.cta__contact a { color: var(--color-on-dark); font-weight: 600; }
.cta__contact a:hover { color: var(--color-pistachio); }

/* White form card. */
.cta__card {
	position: relative;
	overflow: hidden;
	background: var(--color-white);
	color: var(--color-text);
	padding: clamp(var(--space-md), 3vw, var(--space-lg));
}
/* Faint decorative line-art (shared with the reasons/CTA section). */
.cta__card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--reasons-pattern) right top / cover no-repeat;
	opacity: 1;
	pointer-events: none;
}
.cta-form { position: relative; display: block; }
.cta-form__title {
	margin: 0 0 var(--space-md);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
}
.cta-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
}
.cta-field { display: flex; flex-direction: column; gap: 6px; }
.cta-field--wide { grid-column: 1 / -1; }
.cta-field__label {
	font-size: var(--fs-3xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
}
.cta-form input,
.cta-form select {
	width: 100%;
	padding: 0.6rem 0;
	border: 0;
	border-bottom: 1px solid var(--color-border);
	border-radius: 0;
	background: transparent;
	color: var(--color-text);
	font-size: var(--fs-base);
	transition: border-color var(--transition);
}
.cta-form select {
	appearance: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right center / 18px no-repeat;
	padding-right: 24px;
	cursor: pointer;
}
.cta-form input::placeholder { color: var(--color-muted); }
.cta-form input:focus,
.cta-form select:focus { outline: none; border-bottom-color: var(--color-pistachio-dark); }
.cta-form__submit {
	width: 100%;
	justify-content: center;
	margin-top: var(--space-md);
}
.cta-form__note {
	margin: var(--space-sm) 0 0;
	font-size: var(--fs-xs);
	color: var(--color-muted);
}
.cta-form .consult-form__message { margin: var(--space-sm) 0 0; font-size: var(--fs-md); }
.cta-form .consult-form__message.is-success { color: var(--color-pistachio-dark); }
.cta-form .consult-form__message.is-error { color: #c0392b; }
.cta-form.is-loading { opacity: 0.7; pointer-events: none; }

/* 11f. Inner pages — Career centre & Partnership ------------------------- */

/* Generic dark hero (career & partner pages). */
.page-hero {
	position: relative;
	overflow: hidden;
	background: var(--color-dark);
	color: var(--color-on-dark);
	padding-block: var(--space-xl);
	padding-top: calc(var(--space-xl) + var(--space-lg));
}
/* Decorative pattern pinned to the right edge, behind the hero copy. */
.page-hero::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: clamp(180px, 40%, 640px);
	background: url("../images/patterns/bg-1.svg") right center / contain no-repeat;
	opacity: 0.8;
	z-index: 1;
	pointer-events: none;
}
.page-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.35;
	z-index: 0;
}
.page-hero--media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.55) 100%);
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero .eyebrow { color: var(--color-on-dark-muted); }
.page-hero__title {
	font-size: var(--fs-h1);
	color: var(--color-white);
	margin-bottom: var(--space-md);
	text-wrap: balance;
}
.page-hero__title .text-accent { color: var(--color-pistachio); }
.page-hero__lead {
	max-width: 60ch;
	color: var(--color-on-dark-muted);
	font-size: var(--fs-2xl);
	margin-bottom: var(--space-md);
}
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* Split hero (partner): intro + numbered formats panel. */
.page-hero--split .page-hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--space-xl);
	align-items: center;
}
.page-hero--split .page-hero__lead { margin-bottom: var(--space-md); }

/* 11z. Error 404 + Search ------------------------------------------------ */

/* Enhanced search form (searchform.php / get_search_form()). */
.search-form { align-items: stretch; }
.search-form__label { flex: 1 1 auto; display: block; }
.search-form__field {
	width: 100%;
	padding: 0.85rem 1.1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-white);
	color: var(--color-text);
	font-size: var(--fs-base);
}
.search-form__field::placeholder { color: var(--color-muted); }
.search-form__field:focus {
	outline: none;
	border-color: var(--color-pistachio);
	box-shadow: 0 0 0 3px rgba(172, 185, 72, 0.25);
}
.search-form__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-inline: 1.1rem;
}
.search-form__submit svg { width: 20px; height: 20px; fill: currentColor; }

/* 404 — centered, light. */
.error-404 { text-align: center; }
.error-404__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 720px;
	margin-inline: auto;
}
.error-404__code {
	font-size: clamp(5rem, 18vw, 12rem);
	font-weight: 900;
	line-height: 0.85;
	letter-spacing: -0.05em;
	color: var(--color-pistachio);
	margin-bottom: var(--space-sm);
}
.error-404 .eyebrow { color: var(--color-pistachio-dark); }
.error-404__title {
	font-size: var(--fs-h1);
	margin-bottom: var(--space-md);
	text-wrap: balance;
}
.error-404__lead {
	max-width: 52ch;
	font-size: var(--fs-2xl);
	color: var(--color-muted);
	margin-bottom: var(--space-lg);
}
.error-404__search { width: 100%; max-width: 480px; margin-bottom: var(--space-md); }
.error-404__search .search-form { max-width: none; margin-inline: auto; }
.error-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }

/* Helpful links grid (404). */
.helpful-links {
	list-style: none;
	width: 100%;
	margin: var(--space-xl) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-md);
	text-align: center;
}
.helpful-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	height: 100%;
	padding: var(--space-md);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.helpful-link:hover {
	border-color: var(--color-pistachio);
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
	text-decoration: none;
}
.helpful-link__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 4px;
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-pistachio-dark);
	transition: background var(--transition), color var(--transition);
}
.helpful-link:hover .helpful-link__icon { background: var(--color-pistachio); color: var(--color-white); }
.helpful-link__icon svg { width: 26px; height: 26px; fill: currentColor; }
.helpful-link__title { font-size: var(--fs-lg); font-weight: 800; color: var(--color-text); }
.helpful-link__desc { font-size: var(--fs-md); color: var(--color-muted); }

/* Search results. */
.search-hero__form { max-width: 560px; margin-top: var(--space-md); }
.search-results {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-md);
}
.search-card__link {
	display: block;
	padding: var(--space-md);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	transition: border-color var(--transition), transform var(--transition);
}
.search-card__link:hover {
	border-color: var(--color-pistachio);
	transform: translateY(-2px);
	text-decoration: none;
}
.search-card__type {
	display: inline-block;
	font-size: var(--fs-3xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-pistachio-dark);
	margin-bottom: 8px;
}
.search-card__title {
	display: block;
	font-size: var(--fs-heading-sm);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--color-text);
	margin-bottom: 8px;
}
.search-card__link:hover .search-card__title { color: var(--color-pistachio-dark); }
.search-card__excerpt { display: block; color: var(--color-muted); margin-bottom: var(--space-sm); }
.search-card__more { color: var(--color-pistachio-dark); font-weight: 700; }

/* Empty state (content-none). */
.search-empty {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
	padding-block: var(--space-lg);
}
.search-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: var(--space-md);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-pistachio-dark);
}
.search-empty__icon svg { width: 32px; height: 32px; fill: currentColor; }
.search-empty__title { font-size: var(--fs-heading-md); margin-bottom: var(--space-sm); }
.search-empty__text { color: var(--color-muted); margin-bottom: var(--space-md); }
.search-empty .search-form { margin: 0 auto var(--space-md); }
.search-empty__home { margin: 0; }

.partner-formats { list-style: none; margin: 0; padding: 0; }
.partner-formats__item {
	display: flex;
	gap: var(--space-md);
	align-items: baseline;
	padding: var(--space-md) 0;
	border-top: 1px solid var(--color-dark-border);
}
.partner-formats__item:last-child { border-bottom: 1px solid var(--color-dark-border); }
.partner-formats__num {
	flex: 0 0 auto;
	font-family: var(--font-heading);
	font-size: var(--fs-2xl);
	font-weight: 800;
	color: var(--color-pistachio);
}
.partner-formats__title {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--fs-3xl);
	font-weight: 700;
	color: var(--color-white);
	line-height: 1.15;
}
.partner-formats__text {
	display: block;
	margin-top: 4px;
	font-size: var(--fs-md);
	color: var(--color-on-dark-muted);
}

/* Icon-card grid (career services / partner formats). */
.icon-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}
.icon-card {
	display: flex;
	flex-direction: column;
	padding: var(--space-md);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	transition: border-color var(--transition), transform var(--transition);
}
.icon-card:hover { border-color: var(--color-pistachio); transform: translateY(-2px); }
.icon-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: var(--space-md);
}
.icon-card__index {
	font-family: var(--font-heading);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-pistachio-dark);
}
.icon-card__icon {
	display: inline-flex;
	width: 40px;
	height: 40px;
	color: var(--color-text);
}
.icon-card__icon svg,
.icon-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.icon-card__title { font-size: var(--fs-2xl); margin-bottom: var(--space-xs); }
.icon-card__text { color: var(--color-muted); font-size: var(--fs-md); margin-bottom: 0; }

/* Study-abroad dark band (career). */
.abroad {
	background: var(--color-dark);
	color: var(--color-on-dark);
	padding-block: var(--space-xl);
}
.abroad__stats {
	margin-bottom: var(--space-lg);
	padding: var(--space-md);
	border: 1px solid var(--color-dark-border);
}
.abroad__note {
	display: block;
	margin-bottom: var(--space-md);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-pistachio);
}
.abroad__stats-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
}
.abroad__stat-value {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: 800;
	line-height: 1;
	color: var(--color-pistachio);
}
.abroad__stat-label {
	display: block;
	margin-top: 6px;
	max-width: 18ch;
	font-size: var(--fs-sm);
	color: var(--color-on-dark-muted);
}
/* Partner universities — compact card grid. The list can run to 10+ entries,
   so cards stay small and wrap; auto-fill keeps the last row tidy. */
.abroad-unis__list,
.uni-logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
	gap: var(--space-md);
}
/* Study-abroad partner universities — a simple logo wall (logo + optional link
   + caption) that scales to many entries. Replaces the old detailed uni-card. */
.uni-logo { display: flex; flex-direction: column; }
.uni-logo__link {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	padding: var(--space-md);
	transition: transform var(--transition);
}
a.uni-logo__link:hover {
	transform: translateY(-2px);
}
.uni-logo__img {
	max-width: 100%;
	max-height: 84px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.72;
	transition: filter var(--transition), opacity var(--transition);
}
a.uni-logo__link:hover .uni-logo__img { filter: none; opacity: 1; }
.uni-logo__name { font-weight: 600; text-align: center; color: var(--color-text); }

/* Graduate stories grid (career). */
.stories-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}
.story-card {
	display: flex;
	flex-direction: column;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	overflow: hidden;
}
.story-card__media { display: block; height: clamp(200px, 20vw, 260px); }
.story-card__media img { width: 100%; height: 100%; object-fit: cover; }
.story-card__body { display: flex; flex-direction: column; padding: var(--space-md); }
.story-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs) var(--space-sm);
	margin-bottom: var(--space-md);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.story-card__date { color: var(--color-pistachio-dark); }
.story-card__cat {
	padding: 0.3rem 0.6rem;
	border: 1px solid var(--color-border);
	color: var(--color-muted);
	font-size: var(--fs-3xs);
}
.story-card__title {
	font-size: var(--fs-3xl);
	line-height: 1.25;
	margin-bottom: var(--space-sm);
}
.story-card__text { color: var(--color-muted); font-size: var(--fs-md); margin-bottom: var(--space-md); }
.story-card__link {
	margin-top: auto;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text);
}
.story-card__link span { transition: transform var(--transition); display: inline-block; }
.story-card__link:hover { color: var(--color-pistachio-dark); }
.story-card__link:hover span { transform: translateX(4px); }

/* Employment results grid (career). */
.results-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}
.result-card {
	display: flex;
	flex-direction: column;
	padding: var(--space-md);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
}
.result-card--dark { background: var(--color-black); border-color: var(--color-black); color: var(--color-on-dark); }
.result-card__value {
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1;
	color: var(--color-pistachio);
	margin-bottom: var(--space-sm);
}
.result-card__label { font-weight: 600; margin-bottom: 4px; }
.result-card--dark .result-card__label { color: var(--color-white); }
.result-card__sublabel { font-size: var(--fs-xs); color: var(--color-muted); }
.result-card--dark .result-card__sublabel { color: var(--color-on-dark-muted); }
.results__source { margin: var(--space-md) 0 0; font-size: var(--fs-xs); color: var(--color-muted); }

/* Business council — light band (partner). */
.council {
	background: var(--color-white);
	color: var(--color-text);
	padding-block: var(--space-xl);
}
/* Business council — wall of partner logos (logos only, no categories). Each
   tile links out; the organisation name rides along as the img/link title.
   Frameless: logos sit directly on the light band with no dividing lines. */
.council__logos {
	list-style: none;
	margin: 0 0 var(--space-lg);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--space-md);
}
.council-logo { display: flex; }
.council-logo__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 112px;
	padding: var(--space-md);
	color: inherit;
}
/* Logos on a light band — greyed back and lifted to full colour on hover. */
.council-logo__img {
	max-width: 100%;
	max-height: 52px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.72;
	transition: opacity var(--transition), filter var(--transition);
}
.council-logo__link:hover .council-logo__img { opacity: 1; filter: none; }
/* Text fallback when a member has no logo uploaded. */
.council-logo__name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-sm);
	text-align: center;
	color: var(--color-text);
	transition: color var(--transition);
}
.council-logo__link:hover .council-logo__name { color: var(--color-pistachio-dark); }
.council__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
}
.council__note { max-width: 40ch; margin: 0; color: var(--color-muted); font-size: var(--fs-md); }
.council__btn { flex: 0 0 auto; }
.council__btn span { transition: transform var(--transition); display: inline-block; }
.council__btn:hover span { transform: translateX(4px); }

/* International projects (partner) — reuses the standard .news-cards grid and
   .news-card component (see «Новости»); no bespoke card styles needed here. */

/* Partner CTA — dark band with a benefits checklist. */
.offer-cta {
	background: var(--color-dark);
	color: var(--color-on-dark);
	padding-block: var(--space-xl);
}
.offer-cta__inner {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--space-xl);
	align-items: start;
}
.offer-cta .eyebrow { color: var(--color-pistachio); }
.offer-cta__title {
	font-size: var(--fs-h1);
	color: var(--color-white);
	margin-bottom: var(--space-sm);
}
.offer-cta__title .text-accent { color: var(--color-pistachio); }
.offer-cta__text {
	max-width: 44ch;
	color: var(--color-on-dark-muted);
	margin-bottom: var(--space-md);
}
.offer-cta__contacts {
	list-style: none;
	margin: 0 0 var(--space-md);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}
.offer-cta__contacts a { color: var(--color-pistachio); font-weight: 600; }
.offer-cta__contacts a:hover { color: var(--color-pistachio-light); }
.offer-cta__btn span { transition: transform var(--transition); display: inline-block; }
.offer-cta__btn:hover span { transform: translateX(4px); }
.offer-cta__offer {
	border: 1px solid var(--color-dark-border);
	padding: var(--space-md);
}
.offer-cta__offer-title {
	display: block;
	margin-bottom: var(--space-sm);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-pistachio);
}
.offer-cta__perks { list-style: none; margin: 0; padding: 0; }
.offer-cta__perks li {
	position: relative;
	padding: 0.5rem 0 0.5rem 1.75rem;
	border-bottom: 1px solid var(--color-dark-border);
	color: var(--color-on-dark);
	font-size: var(--fs-md);
}
.offer-cta__perks li:last-child { border-bottom: 0; }
.offer-cta__perks li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--color-pistachio);
	font-weight: 700;
}

/* Partner CTA — light «premium» variant: ivory band, an editorial rule above the
   heading and the perks lifted into a white card that overlaps the band edge. */
.offer-cta--light {
	position: relative;
	background: linear-gradient(180deg, var(--color-white) 0%, var(--color-surface) 38%, var(--color-surface) 100%);
	color: var(--color-text);
	overflow: hidden;
}
/* Oversized pistachio wash bleeding in from the right — pure decoration. */
.offer-cta--light::before {
	content: "";
	position: absolute;
	top: -30%;
	right: -12%;
	width: 46rem;
	height: 46rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(172, 185, 72, 0.16) 0%, rgba(172, 185, 72, 0) 68%);
	pointer-events: none;
}
.offer-cta--light .offer-cta__inner { position: relative; z-index: 1; align-items: center; }
.offer-cta--light .eyebrow { color: var(--color-pistachio-dark); }
.offer-cta--light .offer-cta__intro { padding-top: var(--space-sm); }
/* Hairline rule above the heading — the «editorial» cue. */
.offer-cta--light .offer-cta__intro::before {
	content: "";
	display: block;
	width: 3.5rem;
	height: 2px;
	margin-bottom: var(--space-md);
	background: var(--color-pistachio);
}
.offer-cta--light .offer-cta__title { color: var(--color-text); letter-spacing: -0.01em; }
.offer-cta--light .offer-cta__title .text-accent { color: var(--color-pistachio-dark); }
.offer-cta--light .offer-cta__text { color: var(--color-muted); max-width: 46ch; }

.offer-cta--light .offer-cta__contacts {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}
.offer-cta--light .offer-cta__contacts li { display: flex; flex-direction: column; gap: 2px; }
.offer-cta__contact-label {
	font-size: var(--fs-3xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-on-dark-muted);
}
.offer-cta--light .offer-cta__contact-label { color: var(--color-muted); }
.offer-cta--light .offer-cta__contacts a {
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	font-weight: 700;
}
.offer-cta--light .offer-cta__contacts a:hover { color: var(--color-pistachio-dark); }

/* Perks card — white, raised, with a pistachio cap rule. */
.offer-cta--light .offer-cta__offer {
	position: relative;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	padding: var(--space-lg);
	box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.28);
}
.offer-cta--light .offer-cta__offer::before {
	content: "";
	position: absolute;
	inset: -1px -1px auto;
	height: 3px;
	background: var(--color-pistachio);
}
.offer-cta--light .offer-cta__offer-title { color: var(--color-muted); }
.offer-cta--light .offer-cta__perks li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	padding: var(--space-sm) 0;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text);
	font-size: var(--fs-base);
	line-height: 1.45;
}
/* Re-assert the base rule — the variant selector above ties with it on
   specificity and would otherwise leave a dangling rule under the last perk. */
.offer-cta--light .offer-cta__perks li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Swap the inline ✓ pseudo-element for a filled pistachio disc. */
.offer-cta--light .offer-cta__perks li::before {
	content: "✓";
	position: static;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 1.375rem;
	height: 1.375rem;
	margin-top: 0.1rem;
	border-radius: 50%;
	background: var(--color-pistachio);
	color: var(--color-white);
	font-size: var(--fs-2xs);
	line-height: 1;
}

/* 11k. О нас (about page) ------------------------------------------------ */

/* Showreel — poster with a play badge; the clip itself opens in the lightbox. */
.about-reel__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}
/* The copy already sits beside the player, so it drops its stacking margin. */
.about-reel__head { margin-bottom: 0; }
.about-reel__player {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-dark);
}
.about-reel__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease, opacity 0.3s ease;
}
.about-reel__player:hover .about-reel__poster { transform: scale(1.03); opacity: 0.85; }
.about-reel__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 3.75rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--color-pistachio);
	color: var(--color-black);
	transition: transform 0.25s ease;
}
.about-reel__player:hover .about-reel__play { transform: translate(-50%, -50%) scale(1.08); }
.about-reel__play svg { width: 42%; height: 42%; margin-left: 6%; }

/* Mission — light statement band over the «узор» pattern. */
.about-mission {
	position: relative;
	background: var(--color-surface);
	overflow: hidden;
}
.about-mission__pattern {
	position: absolute;
	inset: 0;
	background: url("../images/patterns/uzor.png") center / auto 100% repeat-x;
	/* The pattern is decoration, never competition for the statement. */
	opacity: 0.12;
	pointer-events: none;
}
.about-mission__inner { position: relative; z-index: 1; }
.about-mission .eyebrow { color: var(--color-muted); margin-bottom: var(--space-md); }
.about-mission__text {
	max-width: 28ch;
	margin-bottom: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--color-black);
	text-wrap: balance;
}
.about-mission__text .text-accent { color: var(--color-pistachio-dark); }

/* Photo strip — full-bleed row of shots that scrolls sideways on small screens. */
.about-strip { padding-block: var(--space-lg); }
.about-strip__eyebrow { display: block; margin-bottom: var(--space-sm); }
.about-strip__track {
	display: flex;
	gap: var(--space-xs);
	margin-bottom: 0;
	padding-inline: var(--container-gutter);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.about-strip__track::-webkit-scrollbar { display: none; }
.about-strip__item {
	flex: 0 0 auto;
	height: clamp(200px, 26vw, 380px);
	overflow: hidden;
	scroll-snap-align: start;
	background: var(--color-surface);
}
.about-strip__item img {
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: cover;
	transition: transform var(--transition);
}
.about-strip__item:hover img { transform: scale(1.03); }
/* Each shot opens in the shared lightbox. */
.about-strip__link { display: block; width: 100%; height: 100%; cursor: zoom-in; }

/* Vision — text + image split. */
.about-vision__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}
/* No image uploaded → the copy spans the full width instead of half. */
.about-vision__inner:not(:has(.about-vision__media)) { grid-template-columns: 1fr; }
.about-vision__inner:not(:has(.about-vision__media)) .about-vision__text { max-width: 70ch; }
.about-vision .eyebrow { color: var(--color-pistachio); margin-bottom: var(--space-sm); }
.about-vision__title {
	font-size: var(--fs-h2);
	line-height: 1.15;
	margin-bottom: var(--space-md);
	text-wrap: balance;
}
.about-vision__title .text-accent { color: var(--color-pistachio-dark); }
.about-vision__text { color: var(--color-muted); font-size: var(--fs-xl); margin-bottom: 0; }
.about-vision__media { margin: 0; }
.about-vision__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Values — reuse .icon-cards (3-up). */
.icon-cards--3 { grid-template-columns: repeat(3, 1fr); }

/* Accreditation — document cards + recognition band. */
.accr-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
}
.accr-card {
	display: flex;
	flex-direction: column;
	padding: var(--space-md);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	transition: border-color var(--transition);
}
.accr-card:hover { border-color: var(--color-pistachio); }
.accr-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
}
.accr-card__category {
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-pistachio-dark);
}
.accr-card__mark { flex: none; width: 28px; height: 28px; color: var(--color-pistachio); }
.accr-card__mark svg { width: 100%; height: 100%; }
.accr-card__title { font-size: var(--fs-2xl); line-height: 1.2; margin-bottom: var(--space-xs); }
.accr-card__text { color: var(--color-muted); font-size: var(--fs-md); margin-bottom: var(--space-md); }
.accr-card__meta {
	margin: 0 0 var(--space-md);
	padding: var(--space-sm) 0 0;
	border-top: 1px solid var(--color-border);
	display: grid;
	gap: var(--space-xs);
}
.accr-card__meta-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-sm);
}
.accr-card__meta dt {
	font-size: var(--fs-3xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
}
.accr-card__meta dd { margin: 0; font-weight: 700; text-align: right; }
.accr-card__download {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	margin-top: auto;
	align-self: flex-start;
	padding: 0.6rem 1rem;
	border: 1px solid var(--color-black);
	color: var(--color-black);
	font-weight: 700;
	font-size: var(--fs-md);
	transition: background var(--transition), color var(--transition);
}
.accr-card__download:hover { background: var(--color-black); color: var(--color-white); text-decoration: none; }
.accr-card__download--empty { border-style: dashed; color: var(--color-muted); cursor: default; }
.accr-card__download--empty:hover { background: transparent; color: var(--color-muted); }

.accr-banner {
	margin-top: var(--space-lg);
	padding: var(--space-lg);
	display: flex;
	gap: var(--space-md);
	align-items: flex-start;
	background: var(--color-dark);
	color: var(--color-on-dark);
}
.accr-banner__icon { flex: none; width: 44px; height: 44px; color: var(--color-pistachio); }
.accr-banner__icon svg { width: 100%; height: 100%; }
.accr-banner__title { color: var(--color-white); font-size: var(--fs-3xl); margin-bottom: var(--space-xs); }
.accr-banner__title .text-accent { color: var(--color-pistachio); }
.accr-banner__text { color: var(--color-on-dark-muted); margin-bottom: 0; max-width: 90ch; }
/* Outlined chips restating the two diplomas the band talks about. */
.accr-banner__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: var(--space-md) 0 0;
	padding: 0;
	list-style: none;
}
.accr-banner__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.5ch;
	padding: 0.5rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	font-size: var(--fs-3xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-white);
}
.accr-banner__tag-value { color: var(--color-pistachio); }
.accr-banner__tag-value::before { content: "· "; color: rgba(255, 255, 255, 0.4); }

/* Director's letter — aside (photo) + body (text). */
.about-letter__inner {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: var(--space-xl);
	align-items: start;
}
.about-letter .eyebrow { color: var(--color-pistachio); display: block; margin-bottom: var(--space-md); }
.about-letter__photo { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: var(--space-sm); }
.about-letter__name { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-xl); margin-bottom: 2px; }
.about-letter__position { color: var(--color-muted); font-size: var(--fs-md); margin-bottom: 0; }
.about-letter__title {
	font-size: var(--fs-h2);
	line-height: 1.12;
	margin-bottom: var(--space-md);
	text-wrap: balance;
}
.about-letter__title .text-accent { color: var(--color-pistachio); }
.about-letter__text { color: var(--color-text); font-size: var(--fs-lg); }
.about-letter__text p { margin-bottom: var(--space-sm); }
.about-letter__text p:last-child { margin-bottom: 0; }

/* Testimonials — quote cards. */
.reviews-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}
.review-card {
	display: flex;
	flex-direction: column;
	padding: var(--space-lg) var(--space-md) var(--space-md);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
}
.review-card__quote {
	font-family: var(--font-heading);
	font-size: 3.5rem;
	line-height: 0.6;
	color: var(--color-pistachio);
	margin-bottom: var(--space-sm);
}
.review-card__text {
	margin: 0 0 var(--space-md);
	padding: 0;
	border: 0;
	font-size: var(--fs-lg);
	line-height: 1.5;
	color: var(--color-text);
	flex: 1;
}
.review-card__author { display: flex; flex-direction: column; gap: 2px; }
.review-card__name { font-family: var(--font-heading); font-weight: 700; }
.review-card__meta { color: var(--color-muted); font-size: var(--fs-sm); }

/* Video testimonials — one scroller mixing Shorts and regular clips. Cards keep
   their own aspect ratio and hang from a shared top edge, so a 9:16 next to a
   16:9 reads as deliberate rather than broken. */
.video-reviews {
	/* One height for every thumbnail; each card derives its width from its own
	   aspect ratio. That keeps the row flush top and bottom — and therefore the
	   captions on a single line — however the formats are mixed. */
	--vr-h: clamp(15rem, 26vw, 20rem);
	margin: 0 0 var(--space-lg);
}
/* Thumbnails already share a height, so the captions below them line up on
   their own — no stretching wanted here. */
.video-reviews .cards-track { align-items: flex-start; }
.video-review { width: auto; }
.video-review--horizontal { width: calc(var(--vr-h) * 16 / 9); }
.video-review--vertical { width: calc(var(--vr-h) * 9 / 16); }
.video-review__thumb {
	position: relative;
	display: block;
	height: var(--vr-h);
	overflow: hidden;
	background: var(--color-dark);
}
.video-review__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease, opacity 0.3s ease;
}
.video-review__thumb:hover img { transform: scale(1.04); opacity: 0.85; }
.video-review__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 3.25rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--color-pistachio);
	color: var(--color-black);
	transition: transform 0.25s ease;
}
.video-review__thumb:hover .video-review__play { transform: translate(-50%, -50%) scale(1.1); }
.video-review__play svg { width: 42%; height: 42%; margin-left: 6%; }
.video-review__author {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: var(--space-xs);
}
.video-review__name { font-family: var(--font-heading); font-weight: 700; }
.video-review__meta { color: var(--color-muted); font-size: var(--fs-sm); }

/* Shared slider plumbing — used by the video strip and by the card sliders the
   testimonial and alumni rows turn into once they outgrow their 3-up grid. */
.cards-track {
	margin: 0;
	padding: 0;
	list-style: none;
	/* Cards stretch to the tallest in view, so their footers stay on one line. */
	align-items: stretch;
}
.cards-track > .swiper-slide { height: auto; }

/* Controls — hidden by Swiper's watchOverflow while every slide already fits. */
.slider-ui {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin-top: var(--space-md);
}
.slider-ui:has(.swiper-pagination-lock) { display: none; }
.slider-ui__dots {
	position: static;
	display: flex;
	gap: 0.5rem;
	width: auto;
}
.slider-ui__dots .swiper-pagination-bullet {
	width: 0.5rem;
	height: 0.5rem;
	margin: 0;
	border-radius: 0;
	background: var(--color-border);
	opacity: 1;
	transition: background var(--transition);
}
.slider-ui__dots .swiper-pagination-bullet-active { background: var(--color-pistachio); }
.slider-ui__arrows { display: flex; gap: 0.5rem; }
.slider-ui__arrow {
	display: grid;
	place-items: center;
	width: 2.75rem;
	aspect-ratio: 1;
	padding: 0;
	border: 1px solid var(--color-border);
	background: transparent;
	color: var(--color-black);
	cursor: pointer;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.slider-ui__arrow svg { width: 1.25rem; height: 1.25rem; }
.slider-ui__arrow:hover { background: var(--color-black); border-color: var(--color-black); color: var(--color-white); }
.slider-ui__arrow.swiper-button-disabled { opacity: 0.35; cursor: default; }
.slider-ui__arrow.swiper-button-disabled:hover { background: transparent; border-color: var(--color-border); color: var(--color-black); }
.slider-ui__arrow.swiper-button-lock { display: none; }

/* Alumni testimonials — portrait above the quote. */
.alumni-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}
.alumni-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	transition: border-color var(--transition);
}
.alumni-card:hover { border-color: var(--color-pistachio); }
.alumni-card__media {
	position: relative;
	display: block;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-surface);
}
.alumni-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.alumni-card__media--video:hover img { transform: scale(1.04); }
.alumni-card__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 2.75rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--color-pistachio);
	color: var(--color-black);
	transition: transform 0.25s ease;
}
.alumni-card__media--video:hover .alumni-card__play { transform: translate(-50%, -50%) scale(1.1); }
.alumni-card__play svg { width: 42%; height: 42%; margin-left: 6%; }
.alumni-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	flex: 1;
	padding: var(--space-md);
}
.alumni-card__text {
	margin: 0;
	flex: 1;
	font-size: var(--fs-md);
	line-height: 1.55;
	color: var(--color-text);
}
.alumni-card__author { display: flex; flex-direction: column; gap: 2px; }
.alumni-card__name { font-family: var(--font-heading); font-weight: 700; }
.alumni-card__meta { color: var(--color-muted); font-size: var(--fs-sm); }
.alumni-card__now {
	margin-top: 2px;
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-pistachio-dark);
}

/* About — responsive. */
@media (max-width: 1280px) {
	.about-reel__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
	.about-reel__player { max-width: 46rem; }
	.about-vision__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
	.about-letter__inner { grid-template-columns: 220px 1fr; gap: var(--space-lg); }
	.reviews-grid { grid-template-columns: 1fr; }
	.alumni-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.accr-grid { grid-template-columns: 1fr; }
	.about-letter__inner { grid-template-columns: 1fr; }
	.about-letter__photo { max-width: 220px; }
	.accr-banner { flex-direction: column; }
	.alumni-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	/* Keep a 16:9 card inside the viewport once the gutters are counted. */
	.video-reviews { --vr-h: 11rem; }
}

.accr-more { margin-top: var(--space-md); margin-bottom: 0; }

/* 11k2. Контакты (contacts page) ----------------------------------------- */

/* Department cards — phone + email per team. */
.contacts-grid {
	display: grid;
	/* 4-up on desktop, degrading to 2 → 1 with no orphan card left on its
	   own row. min(100%, …) keeps a single card from overflowing tiny screens. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--space-sm);
	margin-bottom: 0;
	list-style: none;
}
@media (min-width: 1025px) {
	/* Pin to exactly four so a narrow-ish laptop never drops the 4th card. */
	.contacts-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 561px) and (max-width: 1024px) {
	.contacts-grid { grid-template-columns: repeat(2, 1fr); }
}
.contact-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--space-md);
	border: 1px solid var(--color-border);
	background: var(--color-white);
	transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
/* Pistachio accent wipes in from the left on hover — the one premium flourish
   on an otherwise flat, editorial card. */
.contact-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--color-pistachio);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
}
.contact-card:hover {
	border-color: var(--color-black);
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}
.contact-card:hover::before { transform: scaleX(1); }
.contact-card__title {
	margin-bottom: var(--space-xs);
	font-size: var(--fs-xl);
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.contact-card__note {
	margin-bottom: var(--space-md);
	color: var(--color-muted);
	font-size: var(--fs-md);
	line-height: 1.45;
}
/* Pushes the contact lines to the bottom so cards of unequal height align. */
.contact-card__lines { margin-top: auto; margin-bottom: 0; }
/* Label stacked above value, left-aligned — long emails get the full card
   width and read as a clean list instead of colliding with a right edge. */
.contact-card__line {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding-block: var(--space-sm);
	border-top: 1px solid var(--color-border);
}
.contact-card__line:last-child { padding-bottom: 0; }
.contact-card__line dt {
	color: var(--color-muted);
	font-size: var(--fs-3xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.contact-card__line dd {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-lg);
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
	word-break: normal;
	hyphens: none;
}
/* Email is secondary to the phone: a touch smaller and lighter so long
   addresses stay legible without dominating the card. */
.contact-card__line dd:has(a[href^="mailto"]) {
	font-size: var(--fs-md);
	font-weight: 600;
}
.contact-card__line a {
	color: inherit;
	transition: color 0.2s ease;
}
.contact-card__line a:hover { color: var(--color-pistachio-dark); }

/* Address + map split. */
.contacts-place__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
	align-items: start;
}
/* No map embedded → the address column spans the full width. */
.contacts-place__inner:not(:has(.contacts-place__map)) { grid-template-columns: 1fr; }
.contacts-place__address {
	font-family: var(--font-heading);
	font-size: var(--fs-2xl);
	font-weight: 700;
	line-height: 1.3;
}
.contacts-place__hours { color: var(--color-muted); }
.contacts-place__hours-label {
	display: block;
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.contacts-place__route { margin-block: var(--space-sm); }
.contacts-place__socials { margin-top: var(--space-md); }
.contacts-place__socials-label {
	display: block;
	margin-bottom: var(--space-xs);
	color: var(--color-muted);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.contacts-socials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-bottom: 0;
	list-style: none;
}
.contacts-socials a {
	display: inline-block;
	padding: 0.35rem var(--space-sm);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	color: inherit;
	font-size: var(--fs-sm);
	transition: border-color var(--transition), color var(--transition);
}
.contacts-socials a:hover {
	border-color: var(--color-pistachio-dark);
	color: var(--color-pistachio-dark);
}
.contacts-place__map {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-surface);
}
.contacts-place__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 1024px) {
	.contacts-place__inner { grid-template-columns: 1fr; }
}

/* 11k3. Колледж — советы, документы, вакансии ---------------------------- */

/* Shared lead paragraph for the hub sub-pages. Sized and inked as a statement
   rather than body copy — on these short pages it is the only prose there is,
   and at muted grey it read as a caption adrift in the section. */
.council-intro__text,
.regulations__intro,
.vacancies__intro {
	position: relative;
	max-width: 60ch;
	padding-top: var(--space-md);
	font-size: var(--fs-heading-sm);
	line-height: 1.5;
	color: var(--color-text);
}
/* The short accent rule that opens every other section on the site. */
.council-intro__text::before,
.regulations__intro::before,
.vacancies__intro::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3.5rem;
	height: 3px;
	background: var(--color-pistachio);
}
.council-intro__text p:last-child,
.regulations__intro p:last-child,
.vacancies__intro p:last-child { margin-bottom: 0; }
/* These two are followed by their list inside the same section, so the lead has
   to make the gap itself — the council intro has a section of its own. */
.regulations__intro,
.vacancies__intro { margin-bottom: var(--space-lg); }

/* Council members. */
.council-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--space-md);
	margin-bottom: 0;
	list-style: none;
}
.council-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-border);
	background: var(--color-bg);
	transition: border-color var(--transition), transform var(--transition);
}
.council-card:hover { border-color: var(--color-pistachio); transform: translateY(-2px); }
.council-card__photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--color-surface);
	/* The portraits come from different shoots — a light desaturation evens them
	   out in the grid, and clears on hover. */
	filter: grayscale(0.5);
	transition: filter var(--transition);
}
.council-card:hover .council-card__photo { filter: grayscale(0); }
.council-card__name {
	margin: var(--space-sm) var(--space-sm) 0.35rem;
	font-size: var(--fs-xl);
	line-height: 1.25;
}
.council-card__role {
	margin: 0 var(--space-sm) var(--space-sm);
	color: var(--color-muted);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Grouped lists (цели, функции, права…). */
.council-blocks__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--space-md);
	margin-bottom: 0;
	list-style: none;
	counter-reset: council-block;
}
.council-block {
	display: flex;
	flex-direction: column;
	padding: var(--space-md);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	transition: border-color var(--transition), transform var(--transition);
}
.council-block:hover { border-color: var(--color-pistachio); transform: translateY(-2px); }
/* Numbered in CSS — the cards are an ordered set of four, and the index gives
   the grid a spine without asking editors to type it. */
.council-block::before {
	counter-increment: council-block;
	content: counter(council-block, decimal-leading-zero);
	display: block;
	margin-bottom: var(--space-sm);
	font-family: var(--font-heading);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--color-pistachio-dark);
}
.council-block__title {
	position: relative;
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-sm);
	font-size: var(--fs-2xl);
	line-height: 1.25;
}
/* A short rule reads more considered than a full-width 2px underline. */
.council-block__title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 2.5rem;
	height: 2px;
	background: var(--color-pistachio);
}
.council-block__list { margin-bottom: 0; padding-left: 0; list-style: none; }
.council-block__list li {
	position: relative;
	margin-bottom: var(--space-sm);
	padding-left: var(--space-sm);
	color: var(--color-text);
	font-size: var(--fs-md);
	line-height: 1.55;
}
.council-block__list li::before {
	content: "";
	position: absolute;
	top: 0.7em;
	left: 0;
	width: 10px;
	height: 1px;
	background: var(--color-pistachio-dark);
}
.council-block__list li:last-child { margin-bottom: 0; }

/* Shared contact box (councils + vacancies). */
.council-contact__box {
	position: relative;
	padding: calc(var(--space-lg) * 1.25) var(--space-lg);
	background: var(--color-dark);
	color: var(--color-on-dark);
	text-align: center;
	overflow: hidden;
}
/* The house pattern, barely there — enough to stop the band reading as a plain
   black rectangle. */
.council-contact__box::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/patterns/uzor.png") center / auto 100% repeat-x;
	opacity: 0.06;
	pointer-events: none;
}
.council-contact__box > * { position: relative; z-index: 1; }
.council-contact__title {
	margin-bottom: var(--space-sm);
	color: var(--color-white);
	font-size: var(--fs-heading-md);
	line-height: 1.15;
}
.council-contact__text {
	max-width: 52ch;
	margin-inline: auto;
	margin-bottom: var(--space-lg);
	color: var(--color-on-dark-muted);
}
.council-contact__btn { margin-bottom: 0; }

/* Document list. */
.doc-list { margin-bottom: 0; padding-left: 0; list-style: none; }
.doc-item { border-top: 1px solid var(--color-border); }
.doc-item:last-child { border-bottom: 1px solid var(--color-border); }
.doc-item__inner {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding-block: var(--space-sm);
	color: inherit;
	transition: background var(--transition), padding-inline var(--transition);
}
a.doc-item__inner:hover {
	background: var(--color-surface);
	padding-inline: var(--space-sm);
}
.doc-item__icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	color: var(--color-pistachio-dark);
}
.doc-item__icon svg { width: 100%; height: 100%; }
.doc-item__body { flex: 1 1 auto; min-width: 0; }
.doc-item__category {
	display: block;
	color: var(--color-muted);
	font-size: var(--fs-2xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.doc-item__title {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.3;
}
.doc-item__note {
	display: block;
	margin-top: 0.15rem;
	color: var(--color-muted);
	font-size: var(--fs-sm);
}
.doc-item__action {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--space-xs);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.doc-item__action svg { width: 18px; height: 18px; }
.doc-item__ext {
	padding: 0.15rem 0.45rem;
	border: 1px solid var(--color-border);
	color: var(--color-muted);
}
.doc-item__action--empty { color: var(--color-muted); font-weight: 400; }
.regulations__note {
	margin-top: var(--space-md);
	margin-bottom: 0;
	color: var(--color-muted);
	font-size: var(--fs-sm);
}

/* Vacancies — reuses the FAQ accordion, adds a two-column body. */
.vacancies__label { display: block; margin-bottom: var(--space-sm); }

/* Открытые вакансии borrow the FAQ's open/close behaviour but not its looks:
   as hairline rows the role read as a question in a list, and its title ended
   up smaller than the lead paragraph above it. Each one is a card instead. */
.vacancy-list { margin-top: 0; border-top: 0; }
.vacancy-item {
	margin-bottom: var(--space-sm);
	padding: var(--space-md);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	transition: border-color var(--transition);
}
.vacancy-item:last-child { margin-bottom: 0; }
.vacancy-item:hover,
.vacancy-item[open] { border-color: var(--color-pistachio); }
.vacancy-item__q {
	align-items: flex-start;
	padding-block: 0;
}
.vacancy-item__head { display: flex; flex-direction: column; gap: var(--space-xs); }
.vacancy-item__title {
	font-size: var(--fs-h3);
	line-height: 1.15;
}
/* Location and employment type as chips — they scan as facts about the role,
   not as a caption under the title. */
.vacancy-item__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vacancy-item__chip {
	padding: 0.3rem 0.7rem;
	background: var(--color-surface);
	color: var(--color-muted);
	font-family: var(--font-body);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
/* The answer box is capped at 68ch for FAQ prose; a role needs the full width
   so «Что мы ждём» and «Что предлагаем» sit as two real columns. */
.vacancy-item .faq-item__a {
	max-width: none;
	color: var(--color-text);
	font-size: var(--fs-base);
}
.vacancy-item .faq-item__a-inner { padding-top: var(--space-md); padding-bottom: 0; }
/* Scoped past «.faq-item__a p», which is more specific than a lone class and
   would otherwise collapse this to the FAQ's tight paragraph rhythm. */
.vacancy-item .vacancy-item__summary { max-width: 70ch; margin-bottom: var(--space-lg); }
.vacancy-item__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--space-lg);
	margin-block: 0 var(--space-md);
}
.vacancy-item__subtitle {
	margin-bottom: var(--space-sm);
	padding-bottom: var(--space-xs);
	border-bottom: 1px solid var(--color-border);
	font-size: var(--fs-2xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-pistachio-dark);
}
.vacancy-item__list { margin-bottom: 0; padding-left: 0; list-style: none; }
.vacancy-item__list li {
	position: relative;
	margin-bottom: var(--space-sm);
	padding-left: var(--space-sm);
	font-size: var(--fs-md);
	line-height: 1.55;
}
.vacancy-item__list li::before {
	content: "";
	position: absolute;
	top: 0.7em;
	left: 0;
	width: 10px;
	height: 1px;
	background: var(--color-pistachio-dark);
}
.vacancy-item__list li:last-child { margin-bottom: 0; }
.vacancy-item__apply { margin-top: 0; }
.vacancies__empty { color: var(--color-muted); }

@media (max-width: 768px) {
	.doc-item__inner { flex-wrap: wrap; }
	.doc-item__action { margin-left: calc(28px + var(--space-sm)); }
	.council-contact__box { padding: var(--space-md); }
}

/* 11l. Новости и анонсы — archive & single ------------------------------- */

.news-archive { padding-top: var(--space-lg); }
.news-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-bottom: var(--space-lg);
}
.news-filter .filter-chip { text-decoration: none; }
.news-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}
.news-card {
	display: flex;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	transition: border-color var(--transition), transform var(--transition);
}
.news-card:hover { border-color: var(--color-pistachio); transform: translateY(-2px); }
.news-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
}
.news-card__link:hover { text-decoration: none; color: inherit; }
.news-card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--color-surface);
}
.news-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.news-card:hover .news-card__media img { transform: scale(1.04); }
.news-card__media-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-4xl);
	letter-spacing: 0.02em;
	color: var(--color-muted);
	opacity: 0.5;
}
.news-card__badge {
	position: absolute;
	top: var(--space-sm);
	left: var(--space-sm);
	padding: 0.3rem 0.7rem;
	background: var(--color-pistachio);
	color: var(--color-black);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.04em;
}
.news-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-md);
}
.news-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
	margin-bottom: var(--space-xs);
}
.news-card__date {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--color-muted);
}
.news-card__date--event { color: var(--color-pistachio-dark); }
.news-card__cat {
	position: relative;
	padding-left: calc(var(--space-xs) + 6px);
	font-size: var(--fs-xs);
	color: var(--color-muted);
}
.news-card__cat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	transform: translateY(-50%);
}
.news-card__title {
	font-family: var(--font-heading);
	font-size: var(--fs-2xl);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: var(--space-xs);
}
.news-card__text {
	color: var(--color-muted);
	font-size: var(--fs-md);
	margin-bottom: var(--space-md);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.news-card__more {
	margin-top: auto;
	font-weight: 700;
	color: var(--color-pistachio-dark);
}
.news-archive__empty { color: var(--color-muted); font-size: var(--fs-xl); }

/* Pagination (news archive + generic). */
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	justify-content: center;
	margin-top: var(--space-lg);
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 0.75rem;
	border: 1px solid var(--color-border);
	font-weight: 700;
	color: var(--color-text);
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
/* The works archive paginates client-side, so its page links are <button>s. */
.pagination button.page-numbers { background: none; font: inherit; font-weight: 700; cursor: pointer; }
.pagination button.page-numbers.dots { cursor: default; }
.pagination .page-numbers:hover { border-color: var(--color-black); text-decoration: none; }
.pagination .page-numbers.current { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); }
.pagination .page-numbers.dots { border-color: transparent; }

/* Single news. */
.news-single__header { padding-block: var(--space-lg) var(--space-md); }
.news-single__header-inner { max-width: 900px; }
.news-single__breadcrumb {
	margin-bottom: var(--space-md);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.news-single__breadcrumb a { color: var(--color-pistachio-dark); }
.news-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
}
.news-single__badge {
	padding: 0.3rem 0.7rem;
	background: var(--color-pistachio);
	color: var(--color-black);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.04em;
}
.news-single__date { font-weight: 700; color: var(--color-muted); }
.news-single__cat { color: var(--color-pistachio-dark); font-weight: 700; }
.news-single__title { font-size: var(--fs-h1); line-height: 1.08; text-wrap: balance; }
.news-single__cover { margin: var(--space-md) 0 var(--space-lg); }
.news-single__cover img { width: 100%; max-height: 560px; object-fit: cover; }
.news-single__content { max-width: 820px; }

/* Readable prose (article body). */
.prose { font-size: var(--fs-xl); line-height: 1.7; color: var(--color-text); }
.prose > * + * { margin-top: var(--space-sm); }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--space-lg); }
.prose h3 { font-size: var(--fs-h4); margin-top: var(--space-md); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.35rem; }
.prose img { margin-block: var(--space-md); }
.prose a { color: var(--color-pistachio-dark); text-decoration: underline; }
.prose blockquote {
	margin: var(--space-md) 0;
	padding-left: var(--space-md);
	border-left: 3px solid var(--color-pistachio);
	font-size: var(--fs-2xl);
	font-style: italic;
	color: var(--color-text);
}

/* WYSIWYG content from the editor (pages, admission details) — readable body
   with compact, body-scale headings (NOT section-title scale). */
.entry-content { font-size: var(--fs-lg); line-height: 1.7; color: var(--color-text); }
.entry-content > * + * { margin-top: var(--space-sm); }
.entry-content h2 {
	font-size: var(--fs-h3);
	margin-top: var(--space-lg);
	margin-bottom: var(--space-xs);
	line-height: 1.2;
}
.entry-content h3 { font-size: var(--fs-h4); margin-top: var(--space-md); margin-bottom: var(--space-xs); }
.entry-content h4 { font-size: var(--fs-lg); margin-top: var(--space-md); }
.entry-content ul { list-style: disc; padding-left: 1.25rem; }
.entry-content ol { list-style: decimal; padding-left: 1.25rem; }
.entry-content li { margin-bottom: 0.35rem; }
.entry-content li::marker { color: var(--color-pistachio-dark); }
.entry-content img { margin-block: var(--space-md); max-width: 100%; height: auto; }
.entry-content a { color: var(--color-pistachio-dark); text-decoration: underline; }
.entry-content blockquote {
	margin: var(--space-md) 0;
	padding-left: var(--space-md);
	border-left: 3px solid var(--color-pistachio);
	font-size: var(--fs-2xl);
	font-style: italic;
}

.news-single__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}
.news-single__related { display: flex; flex-direction: column; gap: 2px; }
.news-single__related-label {
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
}
.news-single__related-link { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-xl); }
.news-more { margin-top: var(--space-lg); }

@media (max-width: 1280px) {
	.news-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
	.news-cards { grid-template-columns: 1fr; }
	.news-single__footer { flex-direction: column; align-items: flex-start; }
}

/* 11l2. Работа студента — single (portfolio piece) ----------------------- */
/* Two columns: a sticky info rail beside the media story. */
.site-main--work-single { padding-top: 0; }
.work-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
	gap: var(--space-lg);
	padding-block: var(--space-md) var(--space-lg);
	align-items: start;
}
.work-single__aside-inner {
	position: sticky;
	top: calc(var(--header-h) + var(--space-md));
}
.work-single__eyebrow { display: block; margin-bottom: var(--space-xs); }
.work-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
	margin-top: var(--space-sm);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.work-single__cat {
	padding: 0.3rem 0.6rem;
	border: 1px solid var(--color-border);
	color: var(--color-pistachio-dark);
}
.work-single__year { color: var(--color-muted); }
.work-single__title {
	font-size: var(--fs-h2);
	line-height: 1.1;
	text-wrap: balance;
}
/* Project title — the dominant heading of the main column. Centred to match the
   cover image below it, which is centred in the column. */
.work-single__project {
	font-size: var(--fs-h2);
	line-height: 1.1;
	text-wrap: balance;
	text-align: center;
	margin-bottom: var(--space-sm);
}
.work-single__subtitle {
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: var(--space-xs);
}
.work-single__content { margin-bottom: var(--space-md); max-width: 68ch; }
.work-single__crumbs { padding-top: var(--space-md); margin-bottom: 0; }
.work-single__related {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: var(--space-md);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-border);
}
.work-single__back { margin-top: var(--space-md); }

/* Spec list — reference taxonomies + supervisor, label left / value right. */
.work-specs {
	margin: var(--space-md) 0 0;
	border-top: 1px solid var(--color-border);
}
.work-specs__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-sm);
	padding-block: 0.7rem;
	border-bottom: 1px solid var(--color-border);
}
.work-specs dt {
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
}
.work-specs dd { margin: 0; text-align: right; font-weight: 600; }
.work-single__related-label {
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
}
.work-single__related-link { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-lg); }
/* The link hugs the image so the zoom badge lands on the artwork, not in the
   letterbox gap a contained image leaves beside it. */
.work-single__cover {
	display: flex;
	justify-content: center;
	margin: 0 0 var(--space-md);
}
.work-single__cover-link {
	position: relative;
	display: block;
	max-width: 100%;
	overflow: hidden;
	border-radius: var(--radius);
	cursor: zoom-in;
}
.work-single__cover img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 60vh;
	transition: transform 0.6s ease;
}
.work-single__cover-link:hover img { transform: scale(1.03); }
/* Prev / next work. */
.work-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-md);
	margin-top: var(--space-lg);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-border);
}
.work-nav__link { display: flex; flex-direction: column; gap: 4px; }
.work-nav__link--next { margin-left: auto; text-align: right; }
.work-nav__label {
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
}
.work-nav__name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-heading-sm);
}
.work-nav__link:hover .work-nav__name { color: var(--color-pistachio-dark); }

.work-more { margin-top: var(--space-xl); }

@media (max-width: 1024px) {
	.work-single__layout { grid-template-columns: 1fr; gap: var(--space-md); }
	.work-single__aside-inner { position: static; }
}

/* 11m. Преподаватель — single -------------------------------------------- */

/* No hero on this template — the content starts straight under the header and
   needs its own top spacing. */
.site-main--teacher-single { padding-top: var(--space-lg); }
/* Keep the profile off the «Другие преподаватели» band that follows it. */
.teacher-single { padding-bottom: var(--space-xl); }
.teacher-single__inner {
	display: grid;
	grid-template-columns: minmax(0, 340px) 1fr;
	gap: var(--space-xl);
	align-items: start;
}
.teacher-single__aside { position: sticky; top: calc(var(--header-h) + var(--space-md)); }
/* Portraits arrive in whatever crop the photographer shot, so the tile follows
   the image instead of forcing it into a ratio — nothing gets cut off. */
.teacher-single__photo {
	position: relative;
	background: var(--color-surface);
	overflow: hidden;
	margin-bottom: var(--space-md);
}
.teacher-single__photo img { display: block; width: 100%; height: auto; }
/* With no photo there is nothing to set the height, so the initial needs a box. */
.teacher-single__photo--empty { aspect-ratio: 3 / 4; }
.teacher-single__photo-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 5rem;
	color: var(--color-muted);
	opacity: 0.5;
}
.teacher-single__email {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	margin-bottom: var(--space-md);
	font-weight: 500;
	word-break: break-word;
}
.teacher-single__email svg { flex: none; width: 20px; height: 20px; color: var(--color-pistachio-dark); }
/* Aside meta blocks: department, programmes, disciplines. */
/* Department and programmes sit beside each other under the name, so they read
   as one meta row rather than a second column of sidebar. */
.teacher-single__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
}
.teacher-single__block { padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }
.teacher-single__block-label {
	display: block;
	margin-bottom: var(--space-xs);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
}
.teacher-single__progs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
/* Disciplines live in the main column: for most of the team the biography is
   still empty, and this is the substance of the page. Two columns keep long
   lists from running down the page. */
.teacher-single__disc { margin-bottom: var(--space-lg); }
.teacher-single__disc-title {
	margin-bottom: var(--space-sm);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--color-border);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
}
/* Grid, not CSS columns: multi-column splits a long discipline across the
   column break even with break-inside: avoid. */
.teacher-single__disc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem var(--space-lg);
	max-width: 62ch;
}
.teacher-single__disc-list li {
	position: relative;
	padding-left: 1rem;
	line-height: 1.4;
}
.teacher-single__disc-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 7px;
	height: 2px;
	background: var(--color-pistachio);
}
@media (max-width: 768px) {
	.teacher-single__disc-list { grid-template-columns: 1fr; }
}
.teacher-single__prog {
	display: inline-flex;
	padding: 0.4rem 0.85rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	font-size: var(--fs-sm);
	font-weight: 500;
	color: var(--color-text);
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.teacher-single__prog:hover { background: var(--color-black); border-color: var(--color-black); color: var(--color-white); text-decoration: none; }
.teacher-single__breadcrumb {
	margin-bottom: var(--space-md);
	font-size: var(--fs-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.teacher-single__breadcrumb a { color: var(--color-pistachio-dark); }
.teacher-single__name { font-size: var(--fs-h1); line-height: 1.05; margin-bottom: var(--space-xs); }
.teacher-single__position { font-size: var(--fs-2xl); color: var(--color-muted); margin-bottom: var(--space-md); }
.teacher-single__bio { margin-bottom: var(--space-lg); max-width: 62ch; }
.teacher-single__bio-empty { color: var(--color-muted); margin-bottom: var(--space-lg); }
/* A long discipline list can outgrow the viewport, which breaks sticky — only
   pin the aside while it still fits. */
@media (max-height: 800px) {
	.teacher-single__aside { position: static; }
}

@media (max-width: 768px) {
	.teacher-single__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
	.teacher-single__aside { position: static; max-width: 320px; }
}

/* 12. Utilities ---------------------------------------------------------- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: var(--space-xs) var(--space-sm);
	background: var(--color-text);
	color: #fff;
}
.skip-link:focus {
	left: var(--space-sm);
	top: var(--space-sm);
}
.alignwide { max-width: min(100%, 1100px); }
.aligncenter { margin-inline: auto; }

/* Colour / background utilities (brand palette) */
.u-text-pistachio { color: var(--color-pistachio); }
.u-text-black { color: var(--color-black); }
.u-text-white { color: var(--color-white); }
.u-text-ivory { color: var(--color-ivory); }
.u-text-muted { color: var(--color-muted); }

.u-bg-black { background: var(--color-black); color: var(--color-on-dark); }
.u-bg-pistachio { background: var(--color-pistachio); color: var(--color-black); }
.u-bg-ivory { background: var(--color-ivory); color: var(--color-black); }
.u-bg-white { background: var(--color-white); color: var(--color-black); }

/* Highlight an accent word inside a heading (e.g. "Compass College"). */
.text-accent { color: var(--color-pistachio); }

/* 13. Responsive --------------------------------------------------------- */

/* Footer: 2 columns on medium screens */
@media (max-width: 1280px) {
	.site-footer__inner { grid-template-columns: 1fr 1fr; }
	.site-footer__brand { grid-column: 1 / -1; }
}

/* --- Desktop header compaction (1281px → 1600px) -------------------------
   The full nav stays visible down to 1281px, so the bar must hold one line:
   logo · menu · search · language · login. The logo and the actions cluster
   never shrink (flex: none), so all the give comes from the nav — its gap and
   font tighten as the viewport narrows rather than letting anything wrap. */
@media (min-width: 1281px) and (max-width: 1600px) {
	.site-header__inner { gap: var(--space-sm); }
	.site-nav { margin-left: 0; padding-left: var(--space-sm); }
	.site-nav__menu { gap: clamp(0.9rem, 1.6vw, var(--space-md)); }
	.site-nav__menu > li > a { font-size: var(--fs-md); }
}
@media (min-width: 1281px) and (max-width: 1440px) {
	/* Tightest desktop band: shed every spare pixel from the nav and actions so
	   the language switcher stays whole instead of being clipped. */
	.site-header__inner { gap: var(--space-xs); }
	.site-nav { padding-left: var(--space-xs); }
	.site-nav__menu { gap: clamp(0.55rem, 1.1vw, 0.9rem); }
	.site-nav__menu > li > a { font-size: var(--fs-sm); }
	.site-nav__menu .menu-item-has-children > a { padding-right: 14px; }
	/* Icon-only login keeps the cluster narrow without dropping the action. */
	.site-actions { gap: var(--space-xs); }
	.site-actions .site-login { padding-inline: 0.8rem; }
	.site-actions .site-login__label { display: none; }
	.lang-switch__toggle { padding-inline: 0.5rem; }
}

/* Nav never wraps — items sit on one line at every desktop width. */
.site-nav__menu { flex-wrap: nowrap; }
.site-nav__menu > li > a { white-space: nowrap; }

/* --- Below 1281px: the bar collapses to a burger + fullscreen panel ------ */
@media (max-width: 1280px) {
	/* The desktop nav is replaced wholesale by .mobile-menu — hiding it (rather
	   than restyling) keeps the two navigations from fighting over the same
	   .sub-menu rules. */
	.site-nav { display: none; }
	.site-nav__toggle { display: inline-flex; align-items: center; justify-content: center; }
}

/* The switcher is now a compact dropdown, so it stays in the header at every
   width (it used to be dropped below 640px because the segmented control was
   too wide). Language is reachable on phones without opening the burger. */

/* =========================================================================
   Fullscreen mobile menu (header.php → [data-mobile-menu])
   Dark full-viewport panel. Opens from the burger, traps focus, locks body
   scroll. Items fade up in sequence for a considered entrance.
   ========================================================================= */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	background: var(--color-black);
	color: var(--color-on-dark);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.32s ease, visibility 0.32s ease;
}
/* [hidden] is the no-JS/never-opened state; JS drops it on first open. */
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; visibility: visible; }

/* Subtle pistachio wash so the panel is not a flat black rectangle. */
.mobile-menu::before {
	content: "";
	position: absolute;
	top: -20%;
	right: -30%;
	width: 38rem;
	height: 38rem;
	background: radial-gradient(circle, rgba(172, 185, 72, 0.18), transparent 62%);
	pointer-events: none;
}

.mobile-menu__bar {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	min-height: var(--header-h);
	padding-inline: var(--container-gutter);
	border-bottom: 1px solid var(--color-dark-border);
}
/* The mobile menu panel is dark — use the white logo variant here. */
.mobile-menu__bar .site-logo__img { height: 40px; }
.mobile-menu__bar .site-logo__img--dark { display: none; }
.mobile-menu__bar .site-logo__img--light { display: block; }
.mobile-menu__bar .site-title { color: var(--color-on-dark); }

.mobile-menu__close {
	position: relative;
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--color-on-dark);
}
.mobile-menu__close span,
.mobile-menu__close span::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 21px;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: background var(--transition);
}
.mobile-menu__close span { transform: rotate(45deg); }
.mobile-menu__close span::before { left: 0; top: 0; transform: rotate(-90deg); }
.mobile-menu__close:hover { color: var(--color-pistachio); }

.mobile-menu__scroll {
	position: relative;
	z-index: 1;
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--space-lg) var(--container-gutter) var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

/* --- Menu list ---------------------------------------------------------- */
.mobile-menu__list { margin: 0; padding: 0; list-style: none; }
.mobile-menu__list > li { border-bottom: 1px solid var(--color-dark-border); }
.mobile-menu__list > li:first-child { border-top: 1px solid var(--color-dark-border); }

/* Staggered entrance — each row lifts in slightly after the one above it. */
.mobile-menu__list > li {
	opacity: 0;
	transform: translateY(14px);
}
.mobile-menu.is-open .mobile-menu__list > li {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.mobile-menu.is-open .mobile-menu__list > li:nth-child(1) { transition-delay: 0.06s; }
.mobile-menu.is-open .mobile-menu__list > li:nth-child(2) { transition-delay: 0.10s; }
.mobile-menu.is-open .mobile-menu__list > li:nth-child(3) { transition-delay: 0.14s; }
.mobile-menu.is-open .mobile-menu__list > li:nth-child(4) { transition-delay: 0.18s; }
.mobile-menu.is-open .mobile-menu__list > li:nth-child(5) { transition-delay: 0.22s; }
.mobile-menu.is-open .mobile-menu__list > li:nth-child(6) { transition-delay: 0.26s; }
.mobile-menu.is-open .mobile-menu__list > li:nth-child(n+7) { transition-delay: 0.30s; }

.mobile-menu__list > li > a {
	display: block;
	padding: var(--space-sm) 0;
	color: var(--color-on-dark);
	font-family: var(--font-heading);
	font-size: var(--fs-3xl);
	font-weight: 700;
	line-height: var(--lh-tight);
	letter-spacing: -0.01em;
	transition: color var(--transition), padding-left var(--transition);
}
.mobile-menu__list > li > a:hover,
.mobile-menu__list > li.current-menu-item > a { color: var(--color-pistachio); padding-left: 0.5rem; }
/* The desktop active-underline pseudo would stretch the whole row here. */
.mobile-menu__list .current-menu-item > a::after { content: none; }

/* --- Accordion submenus -------------------------------------------------- */
.mobile-menu__list .menu-item-has-children { position: relative; }
.mobile-menu__list .site-nav__submenu-toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 60px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-on-dark-muted);
	cursor: pointer;
	transition: color var(--transition);
}
.mobile-menu__list .site-nav__submenu-toggle:hover { color: var(--color-pistachio); }
.mobile-menu__list .site-nav__submenu-toggle svg {
	width: 18px;
	height: 18px;
	transition: transform 0.28s ease;
}
.mobile-menu__list .is-submenu-open > .site-nav__submenu-toggle svg { transform: rotate(180deg); }
.mobile-menu__list .is-submenu-open > .site-nav__submenu-toggle { color: var(--color-pistachio); }

/* max-height rather than grid-template-rows: the <ul> has one row per <li>, so
   a 0fr template would only ever collapse the first child. The cap is generous
   enough for the longest branch; the accordion is exclusive so only one panel
   is ever expanded. */
.mobile-menu__list .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu__list .is-submenu-open > .sub-menu { max-height: 32rem; }
.mobile-menu__list .sub-menu a {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	/* Right padding matters — the longest programme title reaches the edge of
	   a 375px viewport otherwise. */
	padding: 0.7rem var(--space-sm) 0.7rem var(--space-sm);
	border-left: 2px solid var(--color-dark-border);
	color: var(--color-on-dark-muted);
	font-size: var(--fs-base);
	font-weight: 500;
	transition: color var(--transition), border-color var(--transition);
}
.mobile-menu__list .sub-menu li:last-child a { margin-bottom: var(--space-sm); }
.mobile-menu__list .sub-menu a:hover,
.mobile-menu__list .sub-menu .current-menu-item > a {
	color: var(--color-on-dark);
	border-left-color: var(--color-pistachio);
}
.mobile-menu__list .sub-menu .mega-link__icon {
	width: 34px;
	height: 34px;
	background: transparent;
}
/* Programme icons are dark artwork on transparent — invisible as-is on the
   black panel, so they are flipped to white. */
.mobile-menu__list .sub-menu .mega-link__icon img,
.mobile-menu__list .sub-menu .mega-link__icon svg {
	width: 28px;
	height: 28px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.85;
	transition: opacity var(--transition);
}
.mobile-menu__list .sub-menu a:hover .mega-link__icon img { opacity: 1; }
.mobile-menu__list .sub-menu .mega-link__title {
	font-weight: 500;
	/* Long programme names must wrap rather than push the row wide. */
	white-space: normal;
	overflow-wrap: anywhere;
}
.mobile-menu__list .sub-menu .mega-link__body { min-width: 0; }
/* Descriptions make the accordion very tall on a phone — title only. */
.mobile-menu__list .sub-menu .mega-link__desc { display: none; }

/* --- Panel footer: language · LMS · contacts · socials ------------------- */
.mobile-menu__foot {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--color-dark-border);
}
/* Dark-themed dropdown for the fullscreen menu foot. It sits near the bottom
   of the panel, so the list opens upward to avoid running off-screen. */
.mobile-menu__foot .lang-switch { align-self: flex-start; }
.mobile-menu__foot .lang-switch__toggle {
	color: var(--color-on-dark);
	border-color: var(--color-dark-border);
	background: transparent;
}
.mobile-menu__foot .lang-switch__toggle:hover { color: var(--color-on-dark); border-color: var(--color-on-dark); }
.mobile-menu__foot .lang-switch__menu {
	top: auto;
	bottom: 100%;
	left: 0;
	right: auto;
	background: var(--color-dark);
	border-color: var(--color-dark-border);
}
.mobile-menu__foot .lang-switch__option { color: var(--color-on-dark-muted); }
.mobile-menu__foot .lang-switch__option:hover { color: var(--color-on-dark); background: var(--color-dark-border); }
.mobile-menu__foot .lang-switch__option.is-current { color: var(--color-black); background: var(--color-pistachio); }

.mobile-menu__contacts {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}
.mobile-menu__contacts a { color: var(--color-on-dark); font-size: var(--fs-lg); font-weight: 500; }
.mobile-menu__contacts a:hover { color: var(--color-pistachio); }

/* Body scroll lock while the panel is open. */
body.has-menu-open { overflow: hidden; }

@media (min-width: 1281px) {
	/* Never rendered on desktop, even if the class lingers. */
	.mobile-menu { display: none; }
}

@media (max-width: 560px) {
	.mobile-menu__list > li > a { font-size: var(--fs-2xl); }
	.mobile-menu__scroll { padding-top: var(--space-md); gap: var(--space-md); }
}

/* Reduced motion: reveal without the stagger or slide. */
@media (prefers-reduced-motion: reduce) {
	.mobile-menu,
	.mobile-menu__list > li,
	.mobile-menu__list .sub-menu { transition: none; }
	.mobile-menu__list > li { opacity: 1; transform: none; }
}

/* Faculty: tablet */
@media (max-width: 1280px) {
	.faculty-curriculum__grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-lg); }
	.faculty-facilities__grid { grid-template-columns: repeat(2, 1fr); }
	.faculty-mentors__list { grid-template-columns: repeat(4, 1fr); }

	.teachers-grid { grid-template-columns: repeat(4, 1fr); }
	.teachers-vacancy__inner { grid-template-columns: 1fr; gap: var(--space-lg); }

	.events-news__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
	.works-grid { grid-template-columns: repeat(3, 1fr); }
	.cta__inner { grid-template-columns: 1fr; gap: var(--space-lg); }

	.directions__grid { grid-template-columns: repeat(2, 1fr); }
	.reasons__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}
	.reasons__slider { padding-right: var(--space-md); }
}

@media (max-width: 1024px) {
	/* On mobile the header is solid (not overlaying), so the hero is shorter. */
	.hero,
	.hero__swiper,
	.hero__slide { min-height: 80svh; }
	.hero__swiper { height: 80svh; }
	.hero__ui { bottom: var(--space-md); }
}

@media (max-width: 768px) {
	.site-footer__inner { grid-template-columns: 1fr; }
	.hero__title { font-size: clamp(2rem, 9vw, 3rem); }
	.hero__actions { width: 100%; }

	.faculty-about__inner { grid-template-columns: 1fr; }
	.faculty-curriculum__grid { grid-template-columns: 1fr; }
	.faculty-head__top { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
	.faculty-head__person { text-align: left; }
	.faculty-head__main { grid-template-columns: 1fr; }
	.faculty-head__media { max-width: 280px; }
	/* Keep the facts grid two-up like desktop; just shrink the type and padding. */
	.faculty-facts__item { padding: var(--space-sm) var(--space-sm) var(--space-sm) 0; }
	.faculty-facts__item:nth-child(odd) { padding-right: var(--space-sm); }
	.faculty-facts__item:nth-child(even) { padding-left: var(--space-sm); }
	.faculty-facts__value { font-size: var(--fs-2xl); margin-bottom: 2px; }
	.faculty-facts__label { font-size: var(--fs-3xs); }

	/* A little more height on mobile so the media hero shows some of its image
	   without opening a big void between the top breadcrumbs and the content. */
	.faculty-hero { min-height: 58vh; min-height: 58svh; }
	.faculty-hero--media { min-height: 66vh; min-height: 66svh; }
	.faculty-about__badge { right: 0; }

	.faculty-nav__item--cta { display: none; }
	.faculty-nav__list { gap: var(--space-sm); }
	.faculty-nav__link { font-size: var(--fs-sm); }
	.faculty-facilities__grid { grid-template-columns: 1fr; }
	.faculty-mentors__list { grid-template-columns: repeat(3, 1fr); }
	.teachers-grid { grid-template-columns: repeat(3, 1fr); }

	.teachers-filter__row { flex-direction: column; gap: var(--space-xs); }
	.teachers-hero__stats { gap: var(--space-md); }

	.works-grid { grid-template-columns: repeat(2, 1fr); }
	.news-item__link { grid-template-columns: 96px 1fr; gap: var(--space-sm); }
	.cta-form__grid { grid-template-columns: 1fr; }

	.directions__grid { grid-template-columns: 1fr; }
	/* Blurbs and framing don't survive touch hover — show text by default. */
	.dir-card__text { max-height: 8rem; opacity: 1; margin-top: var(--space-xs); }
}

@media (max-width: 560px) {
	.faculty-mentors__list { grid-template-columns: repeat(2, 1fr); }
	.teachers-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.site-actions .site-login { display: none; }
	.site-actions { gap: var(--space-xs); }
}

/* Inner pages — Career & Partner responsive */
@media (max-width: 1280px) {
	.page-hero--split .page-hero__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
	.icon-cards,
	.icon-cards--6 { grid-template-columns: repeat(2, 1fr); }
	.abroad__stats-grid { grid-template-columns: repeat(2, 1fr); }
	.abroad-unis__list,
	.uni-logos { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
	.stories-grid { grid-template-columns: repeat(2, 1fr); }
	.results-grid { grid-template-columns: repeat(2, 1fr); }
	.offer-cta__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
	/* The decorative wash is sized for a wide band — shrink it once stacked. */
	.offer-cta--light::before { width: 28rem; height: 28rem; right: -20%; }
	.offer-cta--light .offer-cta__offer { padding: var(--space-md); }
}

@media (max-width: 768px) {
	.page-hero::before { display: none; }
	.icon-cards,
	.icon-cards--6 { grid-template-columns: 1fr; }
	.stories-grid { grid-template-columns: 1fr; }
	.results-grid { grid-template-columns: 1fr; }
	.council__grid { grid-template-columns: repeat(2, 1fr); }
	.council__footer { flex-direction: column; align-items: flex-start; }
	.council__btn { width: 100%; text-align: center; }
	.council-item__logo { height: 28px; }
	/* Stack the contact pairs so long emails never force a horizontal scroll. */
	.offer-cta--light .offer-cta__contacts { flex-direction: column; gap: var(--space-sm); }
	.offer-cta--light .offer-cta__contacts a { font-size: var(--fs-base); overflow-wrap: anywhere; }
	.offer-cta--light .offer-cta__btn { width: 100%; text-align: center; }
}

@media (max-width: 560px) {
	/* Two up rather than one — four stacked figures make the dark band very
	   tall on a phone, and the values stay legible at this size. */
	.abroad__stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
	.abroad__stat-label { max-width: none; }
	.council__grid { grid-template-columns: 1fr; }
	.offer-cta--light .offer-cta__intro::before { margin-bottom: var(--space-sm); }
	.offer-cta--light .offer-cta__perks li { font-size: var(--fs-md); }

	/* Hero quick-nav wraps to 2–3 rows on a phone — tighten the pills. */
	.page-hero__nav { gap: var(--space-xs) 0.5rem; }
	.page-hero__nav-link { padding: 0.4rem 0.85rem; font-size: var(--fs-sm); }
}

/* =========================================================================
   ADMISSIONS — hub (page-admission.php) + detail (page-admission-detail.php)
   ========================================================================= */

/* Hero CTA — reuses .page-hero / .page-hero__actions. */
.site-main--admission .page-hero__actions { margin-top: var(--space-md); }

/* Enrolment steps — icon + «ШАГ NN» + short title + rule + description. */
.adm-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0;
}
.adm-step {
	position: relative;
	padding: var(--space-xs) clamp(var(--space-md), 3vw, var(--space-lg));
}
.adm-step:first-child { padding-left: 0; }
.adm-step + .adm-step::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.25rem;
	bottom: 0.25rem;
	width: 1px;
	background: var(--color-border);
}
.adm-step__label {
	display: block;
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-pistachio);
	margin-bottom: var(--space-md);
}
.adm-step__icon {
	display: block;
	width: 40px;
	height: 40px;
	color: var(--color-text);
	margin-bottom: var(--space-md);
}
.adm-step__icon svg { width: 100%; height: 100%; }
.adm-step__icon img { width: 100%; height: 100%; object-fit: contain; }
.adm-step__title { font-size: var(--fs-4xl); margin-bottom: var(--space-sm); }
.adm-step__rule {
	display: block;
	width: 32px;
	height: 2px;
	margin-bottom: var(--space-sm);
	background: var(--color-text);
}
.adm-step__text { color: var(--color-muted); font-size: var(--fs-md); margin-bottom: 0; }
.adm-steps__cta { margin-top: var(--space-lg); }

/* Entrance-exams block — discipline cards + «what to bring» checklist. */
.icon-cards--4 { grid-template-columns: repeat(4, 1fr); }
.adm-exams__grid .icon-card__icon { margin-bottom: var(--space-md); color: var(--color-pistachio); }
.adm-exams__bring {
	margin-top: var(--space-lg);
	padding: var(--space-md) var(--space-lg);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
}
.adm-exams__bring-title {
	font-size: var(--fs-2xl);
	margin-bottom: var(--space-md);
}
.adm-exams__bring-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-xs) var(--space-lg);
}
.adm-exams__bring-item {
	position: relative;
	padding-left: 1.75rem;
	font-size: var(--fs-md);
}
.adm-exams__bring-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15rem;
	width: 18px;
	height: 18px;
	background: var(--color-pistachio);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.adm-exams__cta { margin-top: var(--space-lg); }

/* Creative-contest block — intro + photo collage (top), process flow (bottom). */
.adm-contest__inner {
	display: grid;
	grid-template-columns: 5fr 6fr;
	gap: var(--space-lg) var(--space-xl);
	align-items: center;
}
.adm-contest__intro .section-head { margin-bottom: var(--space-md); }
.adm-contest__cta { margin-top: var(--space-md); }
.adm-contest__photos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-sm);
}
.adm-contest__photo {
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.adm-contest__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.adm-contest__photo:hover img { transform: scale(1.05); }

/* Contest process — horizontal timeline: a hairline track with pistachio
   square nodes, vertical column dividers, and an Instagram note beneath. */
.adm-timeline { margin-top: var(--space-xl); }
.adm-timeline__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--color-border);
}
.adm-timeline__step {
	position: relative;
	padding: var(--space-lg) var(--space-lg) var(--space-md) var(--space-lg);
	border-left: 1px solid var(--color-border);
}
.adm-timeline__step:first-child { border-left: 0; padding-left: 0; }
.adm-timeline__node {
	position: absolute;
	top: -6px;
	left: var(--space-lg);
	width: 12px;
	height: 12px;
	background: var(--color-pistachio);
}
.adm-timeline__step:first-child .adm-timeline__node { left: 0; }
.adm-timeline__eyebrow {
	display: block;
	margin-bottom: var(--space-sm);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary-dark);
}
.adm-timeline__title {
	margin: 0 0 var(--space-sm);
	font-family: var(--font-heading);
	font-size: var(--fs-heading-md);
	font-weight: 600;
	line-height: 1.1;
}
.adm-timeline__text { margin: 0; color: var(--color-muted); font-size: var(--fs-md); }
.adm-timeline__ig {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin: var(--space-lg) 0 0;
}
.adm-timeline__ig-icon { display: inline-flex; width: 26px; height: 26px; color: var(--color-primary-dark); }
.adm-timeline__ig-icon svg { width: 100%; height: 100%; }
.adm-timeline__ig-note {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
}
.adm-timeline__ig-handle {
	font-size: var(--fs-md);
	font-weight: 700;
	color: var(--color-text);
	text-decoration: none;
}
.adm-timeline__ig-handle:hover { color: var(--color-primary-dark); }

/* ORT notice — dark full-width band with a «no» icon. */
.adm-ort {
	background: var(--color-dark);
	color: var(--color-on-dark);
	padding-block: var(--space-lg);
}
.adm-ort__inner {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
}
.adm-ort__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border: 1px solid var(--color-pistachio);
	color: var(--color-pistachio);
}
.adm-ort__icon svg { width: 32px; height: 32px; }
.adm-ort__title {
	margin: 0 0 var(--space-xs);
	font-family: var(--font-heading);
	font-size: var(--fs-heading-md);
	font-weight: 700;
	line-height: 1.2;
}
.adm-ort__title .text-accent { color: var(--color-pistachio); }
.adm-ort__text { margin: 0; color: var(--color-on-dark-muted); max-width: 70ch; }

/* Exam sample download link (inside a discipline card). */
.adm-exam-download {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--space-md);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-primary-dark);
	text-decoration: none;
}
.adm-exam-download:hover { text-decoration: underline; }
.adm-exam-download__icon { display: inline-flex; width: 18px; height: 18px; }
.adm-exam-download__icon svg { width: 100%; height: 100%; }

/* Docs note «подробнее» link. */
.adm-docs__note-link {
	display: inline-block;
	margin-left: 0.35rem;
	font-weight: 700;
	color: var(--color-primary-dark);
	text-decoration: none;
	white-space: nowrap;
}
.adm-docs__note-link:hover { text-decoration: underline; }

/* FAQ block «all questions» button + anchor offset for the apply CTA. */
.adm-faq__cta { margin-top: var(--space-lg); }
#admission-apply,
#admission-faq { scroll-margin-top: calc(var(--header-h) + var(--space-sm)); }

/* Career page — in-hero section nav anchor offsets. */
#services,
#abroad,
#stories,
#results,
#career-registration { scroll-margin-top: calc(var(--header-h) + var(--space-sm)); }

/* Prep-courses block — checklist column + «course format» fact card. */
.adm-courses__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg) var(--space-xl);
	align-items: center;
}
.adm-courses__points {
	list-style: none;
	margin: var(--space-md) 0 0;
	padding: 0;
}
.adm-courses__point {
	position: relative;
	padding: var(--space-sm) 0 var(--space-sm) 2rem;
	border-top: 1px solid var(--color-border);
}
.adm-courses__point:last-child { border-bottom: 1px solid var(--color-border); }
.adm-courses__point::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: var(--color-pistachio);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.adm-courses__cta { margin-top: var(--space-lg); }

.adm-course-card { border: 1px solid var(--color-border); background: var(--color-bg); }
.adm-course-card__head {
	background: var(--color-dark);
	color: var(--color-on-dark);
	padding: var(--space-md) var(--space-lg);
}
.adm-course-card__label {
	display: block;
	margin-bottom: var(--space-xs);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-pistachio);
}
.adm-course-card__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.2;
}
.adm-course-card__facts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.adm-course-fact {
	padding: var(--space-md) var(--space-lg);
	border-top: 1px solid var(--color-border);
}
.adm-course-fact:nth-child(even) { border-left: 1px solid var(--color-border); }
.adm-course-fact__label {
	display: block;
	margin-bottom: var(--space-xs);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
}
.adm-course-fact__value {
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: 800;
	line-height: 1;
}
.adm-course-fact__unit {
	font-size: var(--fs-md);
	font-weight: 500;
	color: var(--color-muted);
	margin-left: 0.25rem;
}

/* Hero quick-nav — pill links to the detail child pages (on the dark hero). */
.page-hero__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) 0.75rem;
	margin-top: var(--space-md);
}
.page-hero__nav-link {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--color-dark-border);
	border-radius: var(--radius-pill);
	color: var(--color-on-dark);
	font-size: var(--fs-md);
	font-weight: 500;
	text-decoration: none;
	transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.page-hero__nav-link:hover {
	border-color: var(--color-pistachio);
	background: var(--color-pistachio);
	color: var(--color-black);
}

/* Key dates — dark band, mirrors .abroad. */
.adm-dates {
	background: var(--color-white);
	padding-block: var(--space-xl);
}
.adm-dates__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
}
.adm-date {
	position: relative;
	padding: var(--space-md);
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--color-pistachio);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.adm-date:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
.adm-date__value {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--fs-heading-md);
	font-weight: 800;
	line-height: 1.1;
	color: var(--color-pistachio-dark);
	margin-bottom: var(--space-xs);
}
.adm-date__label { color: var(--color-muted); font-size: var(--fs-md); }

/* Required documents — intro + checklist columns. Dark section. */
.adm-docs {
	background: var(--color-dark);
	color: var(--color-on-dark);
}
.adm-docs__inner {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: var(--space-lg);
	align-items: start;
}
.adm-docs__note {
	margin-top: var(--space-md);
	padding: var(--space-sm) var(--space-md);
	border-left: 3px solid var(--color-pistachio);
	background: var(--color-dark-surface);
	font-size: var(--fs-md);
	color: var(--color-on-dark-muted);
}
.adm-docs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}
.adm-docs__item {
	position: relative;
	padding: var(--space-sm) 0 var(--space-sm) 2.25rem;
	border-bottom: 1px solid var(--color-dark-border);
}
.adm-docs__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: var(--color-pistachio);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Compact detail header — second-level page, hierarchy-forward. */
.adm-detail-head {
	background: var(--color-dark);
	color: var(--color-on-dark);
	padding-block: var(--space-lg);
}
.adm-detail-head .breadcrumbs { margin-bottom: var(--space-sm); }
.adm-detail-head .breadcrumbs__item,
.adm-detail-head .breadcrumbs__link { color: var(--color-on-dark-muted); }
.adm-detail-head .breadcrumbs__item:not(:first-child)::before { color: var(--color-dark-border); }
.adm-detail-head .breadcrumbs__link:hover { color: var(--color-pistachio); }
.adm-detail-head .breadcrumbs__current { color: var(--color-on-dark); }
.adm-detail-head__parent {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: var(--space-sm);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-pistachio);
	text-decoration: none;
}
.adm-detail-head__parent:hover { text-decoration: underline; }
.adm-detail-head__title {
	margin: 0;
	font-size: var(--fs-heading-md);
	line-height: 1.15;
	color: var(--color-on-dark);
}
.adm-detail-head__subtitle {
	margin: var(--space-sm) 0 0;
	max-width: 60ch;
	color: var(--color-on-dark-muted);
	font-size: var(--fs-base);
}

/* Detail page — content + sticky aside. */
.adm-detail { padding-block: var(--space-md) var(--space-xl); }
.adm-detail__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--space-xl);
	align-items: start;
}
.adm-detail__body { max-width: 68ch; }
.adm-detail__aside {
	position: sticky;
	top: calc(var(--header-h) + var(--space-sm));
	display: grid;
	gap: var(--space-md);
}
.adm-aside__nav {
	padding: var(--space-md);
	background: var(--color-dark);
	color: var(--color-on-dark);
}
.adm-aside__nav-title {
	margin-bottom: var(--space-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--fs-xs);
}
.adm-aside__nav-title a { color: var(--color-pistachio); text-decoration: none; }
.adm-aside__nav-list { list-style: none; margin: 0; padding: 0; }
.adm-aside__nav-item { border-top: 1px solid var(--color-dark-border); }
.adm-aside__nav-item a,
.adm-aside__nav-item span {
	display: block;
	padding: 0.6rem 0;
	color: var(--color-on-dark);
	text-decoration: none;
	font-size: var(--fs-md);
	transition: color var(--transition);
}
.adm-aside__nav-item a:hover { color: var(--color-pistachio); }
.adm-aside__nav-item.is-current span {
	font-weight: 700;
	color: var(--color-pistachio);
}
.adm-aside__form { padding: var(--space-md); border: 1px solid var(--color-border); }

@media (max-width: 1280px) {
	.adm-steps__list { grid-template-columns: repeat(3, 1fr); column-gap: var(--space-lg); row-gap: var(--space-lg); }
	.adm-step { padding-inline: 0; }
	.adm-step + .adm-step::before { display: none; }
	.adm-detail__grid { grid-template-columns: 1fr; }
	.adm-detail__aside { position: static; }
}

@media (max-width: 1024px) {
	.adm-steps__list { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-lg); row-gap: var(--space-lg); }
	.adm-step { padding-inline: 0; }
	.adm-step:first-child { padding-left: 0; }
	.adm-step + .adm-step::before { display: none; }
	.adm-dates__list { grid-template-columns: repeat(2, 1fr); }
	.adm-docs__inner { grid-template-columns: 1fr; gap: var(--space-md); }
	.icon-cards--4 { grid-template-columns: repeat(2, 1fr); }
	.adm-exams__bring-list { grid-template-columns: 1fr; }
	.adm-contest__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
	.adm-contest__photos { grid-template-columns: repeat(2, 1fr); }
	.adm-timeline__track { grid-template-columns: repeat(2, 1fr); }
	.adm-timeline__step:nth-child(2n+1) { border-left: 0; padding-left: 0; }
	.adm-timeline__step:nth-child(2n+1) .adm-timeline__node { left: 0; }
	.adm-timeline__step:nth-child(n+3) { border-top: 1px solid var(--color-border); }
	.adm-courses__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
	.adm-ort__inner { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
}

@media (max-width: 560px) {
	.adm-steps__list,
	.adm-dates__list,
	.icon-cards--4 { grid-template-columns: 1fr; }
}

/* =========================================================================
   STUDENT LIFE — Студенческая жизнь (page-student-life.php)
   ========================================================================= */

/* Sections are reached via the hero anchor nav — clear the fixed header. */
.site-main--student-life section[id] { scroll-margin-top: calc(var(--header-h) + var(--space-md)); }

/* Member cards reuse the .teachers-grid / .teacher-card--archive look. */
.slife-members { margin-bottom: var(--space-xl); }
.slife-graduates__members { margin-top: var(--space-xl); }
.slife-graduates__members .slife-structure__title { margin-bottom: var(--space-md); }
.slife-graduates__members .slife-members { margin-bottom: 0; }

/* Совет креаторов — goals reuse .icon-cards--3; the index badge carries the
   numbering since these cards have no icons. */
.slife-goals { margin-bottom: var(--space-xl); }
.slife-goals .icon-card__top { margin-bottom: var(--space-sm); }

/* Wide photo band separating the council intro from the goal cards. */
.slife-band {
	margin: 0 0 var(--space-xl);
	aspect-ratio: 21 / 8;
	overflow: hidden;
	background: var(--color-surface);
}
.slife-band img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Structure — «Две палаты» on the left, roles + committees on the right. */
.slife-structure {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}
.slife-structure__title {
	margin-bottom: var(--space-md);
	font-size: var(--fs-xl);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.slife-structure__title--gap { margin-top: var(--space-lg); }

.slife-chambers { margin-bottom: 0; padding: 0; list-style: none; }
.slife-chamber {
	padding-left: var(--space-md);
	border-left: 3px solid var(--color-pistachio);
}
.slife-chamber + .slife-chamber { margin-top: var(--space-md); }
.slife-chamber__title { margin-bottom: 0.35rem; font-size: var(--fs-lg); }
.slife-chamber__text {
	margin-bottom: 0;
	color: var(--color-muted);
	font-size: var(--fs-md);
	line-height: 1.5;
}

/* Roles / committees — pill rows. */
.slife-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}
.slife-tag {
	padding: 0.5rem 1rem;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	font-size: var(--fs-md);
	font-weight: 500;
}
.slife-tag--accent {
	background: transparent;
	border-color: var(--color-pistachio);
	color: var(--color-black);
}

/* Closing note + optional link under the council block. */
.slife-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin-top: var(--space-lg);
	padding: var(--space-md);
	background: var(--color-surface);
}
.slife-note__text {
	max-width: 68ch;
	margin-bottom: 0;
	font-size: var(--fs-lg);
	line-height: 1.5;
}

/* Grand Show — dark full-bleed band with an optional photo backdrop. */
.grand-show {
	position: relative;
	padding-block: var(--space-xl);
	background: var(--color-dark);
	color: var(--color-on-dark);
	overflow: hidden;
}
.grand-show__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.25;
}
.grand-show__inner { position: relative; }
.grand-show .eyebrow { color: var(--color-pistachio); }

.grand-show__head { max-width: 60ch; margin-bottom: var(--space-lg); }
.grand-show__title {
	margin-bottom: var(--space-md);
	color: var(--color-white);
	font-size: var(--fs-section-title);
	line-height: var(--lh-heading);
	text-transform: uppercase;
}
.grand-show__lead {
	margin-bottom: var(--space-sm);
	color: var(--color-white);
	font-size: var(--fs-2xl);
	font-weight: 500;
}
.grand-show__text {
	margin-bottom: 0;
	color: var(--color-on-dark-muted);
	font-size: var(--fs-lg);
	line-height: 1.6;
}
.grand-show__actions { margin-top: var(--space-md); margin-bottom: 0; }

.grand-show__points {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin-bottom: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--color-dark-border);
}
.grand-show__point {
	padding: var(--space-md) var(--space-md) 0 0;
	border-right: 1px solid var(--color-dark-border);
}
.grand-show__point:last-child { border-right: 0; }
.grand-show__point + .grand-show__point { padding-left: var(--space-md); }
.grand-show__point-title {
	margin-bottom: var(--space-xs);
	color: var(--color-white);
	font-size: var(--fs-lg);
}
.grand-show__point-text {
	margin-bottom: 0;
	color: var(--color-on-dark-muted);
	font-size: var(--fs-md);
	line-height: 1.5;
}

/* Photo strip closing the Grand Show band. */
.grand-show__gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-sm);
	margin: var(--space-lg) 0 0;
	padding: 0;
	list-style: none;
}
.grand-show__shot { aspect-ratio: 4 / 3; overflow: hidden; }
.grand-show__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(1);
	transition: filter var(--transition), transform var(--transition);
}
.grand-show__shot:hover img { filter: none; transform: scale(1.03); }

/* Совет выпускников — four bordered blurbs. */
.slife-graduates__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--space-lg);
	align-items: stretch;
}
.slife-graduates__inner--no-media { grid-template-columns: 1fr; }
/* Stretches to the height of the blurb grid beside it — no aspect-ratio here,
   or the photo outgrows the column and leaves a gap under the blurbs. */
.slife-graduates__media {
	margin: 0;
	min-height: 380px;
	overflow: hidden;
	background: var(--color-white);
}
.slife-graduates__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.slife-items {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}
.slife-item {
	padding: var(--space-md);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--color-pistachio);
}
.slife-item__title { margin-bottom: var(--space-xs); font-size: var(--fs-xl); }
.slife-item__text {
	margin-bottom: 0;
	color: var(--color-muted);
	font-size: var(--fs-md);
	line-height: 1.55;
}
.slife-graduates__actions { margin-top: var(--space-lg); margin-bottom: 0; }

/* Мероприятия — festival cards; media is optional per event. */
.event-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-md);
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}
.event-card {
	display: flex;
	flex-direction: column;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	transition: border-color var(--transition), transform var(--transition);
}
.event-card:hover { border-color: var(--color-pistachio); transform: translateY(-2px); }
.event-card__media { display: block; aspect-ratio: 4 / 3; background: var(--color-surface); }
.event-card__media img { width: 100%; height: 100%; object-fit: cover; }
.event-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-md);
}
/* Without a photo the card leans on the title, so give it more presence. */
.event-card--no-media .event-card__body { justify-content: space-between; min-height: 150px; }
.event-card--no-media .event-card__title { font-size: var(--fs-2xl); }
.event-card__title { margin-bottom: var(--space-xs); font-size: var(--fs-lg); line-height: 1.25; }
.event-card__text {
	margin-bottom: var(--space-sm);
	color: var(--color-muted);
	font-size: var(--fs-md);
	line-height: 1.5;
}
.event-card__link {
	margin-top: auto;
	font-weight: 700;
	font-size: var(--fs-md);
	color: var(--color-black);
	border-bottom: 2px solid var(--color-pistachio);
	align-self: flex-start;
}
.event-card__link:hover { color: var(--color-pistachio-dark); text-decoration: none; }

@media (max-width: 1280px) {
	.grand-show__points { grid-template-columns: repeat(2, 1fr); }
	.grand-show__point:nth-child(2n) { border-right: 0; }
	.slife-band { aspect-ratio: 21 / 10; }
	.grand-show__point:nth-child(n+3) { border-top: 1px solid var(--color-dark-border); }
	.event-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
	.slife-structure { grid-template-columns: 1fr; gap: var(--space-lg); }
	.slife-graduates__inner { grid-template-columns: 1fr; }
	.slife-graduates__media { min-height: 0; aspect-ratio: 16 / 9; }
	.slife-goals { margin-bottom: var(--space-lg); }
	.event-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.grand-show__points { grid-template-columns: 1fr; }
	.grand-show__point,
	.grand-show__point + .grand-show__point { padding: var(--space-md) 0 0; border-right: 0; }
	.grand-show__point + .grand-show__point { border-top: 1px solid var(--color-dark-border); }
	.slife-items { grid-template-columns: 1fr; }
	.event-grid { grid-template-columns: 1fr; }
	.slife-band { aspect-ratio: 4 / 3; }
	.grand-show__gallery { grid-template-columns: 1fr; }
	.slife-note { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   PRELOADER — front page only (template-parts/preloader.php)

   Rendered in the markup so the hero never flashes before it covers. The
   auto-dismiss keyframes are the no-JS fallback; main.js adds .is-done on
   `load` to clear it sooner. Both paths end at the same place, so the panel
   can never strand the page.
   ========================================================================= */
.preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-black);
	/* Fallback: clear itself even if the scripts never run. */
	animation: preloader-auto-out 0.9s cubic-bezier(0.76, 0, 0.24, 1) 3.4s forwards;
}

/* Pistachio curtain trailing the black panel — the two leave in sequence, so
   the exit reads as a wipe rather than a fade. */
.preloader__curtain {
	position: absolute;
	inset: 0;
	background: var(--color-pistachio);
	transform: translateY(100%);
	z-index: -1;
}

.preloader__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	padding-inline: var(--container-gutter);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

/* White logo artwork sits straight on the black panel — no plate, or the white
   mark would vanish into a white block. */
.preloader__logo {
	opacity: 0;
	transform: translateY(12px);
	animation: preloader-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
.preloader__logo img { max-height: 56px; width: auto; }

.preloader__wordmark {
	color: var(--color-white);
	font-family: var(--font-heading);
	font-size: var(--fs-h2);
	font-weight: 800;
	letter-spacing: -0.02em;
	opacity: 0;
	transform: translateY(12px);
	animation: preloader-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

/* Progress rail — the fill is driven by JS; the keyframe is the no-JS path. */
.preloader__bar {
	position: relative;
	width: min(260px, 60vw);
	height: 2px;
	background: rgba(255, 255, 255, 0.16);
	overflow: hidden;
}
.preloader__bar-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: var(--color-pistachio);
	animation: preloader-fill 3.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* Once JS takes over it sets the width directly and the keyframe steps aside. */
.preloader.is-js .preloader__bar-fill {
	animation: none;
	transition: width 0.3s ease;
}

.preloader__count {
	color: var(--color-on-dark-muted);
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	font-variant-numeric: tabular-nums;
}
.preloader__count::after { content: "%"; }

/* --- Exit ----------------------------------------------------------------
   Three beats, deliberately sequential — running the curtain and the panel
   together just reads as a smear:
     1. the mark fades out          (0 → 0.3s)
     2. pistachio rises over black  (0.1 → 0.55s)
     3. the whole sheet lifts away  (0.5 → 1.1s)
   ------------------------------------------------------------------------- */
.preloader.is-done {
	animation: none;
	transform: translateY(-100%);
	transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1) 0.5s;
}
.preloader.is-done .preloader__curtain {
	transform: translateY(0);
	transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1) 0.1s;
}
.preloader.is-done .preloader__inner {
	opacity: 0;
	transform: translateY(-16px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.preloader.is-hidden { display: none; }

/* Hold the page still while the panel is up. The class goes on <html> because
   the preloader initialises before DOMContentLoaded, when document.body may
   not exist yet; body is matched too for the late-init path. */
html.is-preloading,
html.is-preloading body,
body.is-preloading { overflow: hidden; }

@keyframes preloader-in {
	to { opacity: 1; transform: translateY(0); }
}
@keyframes preloader-fill {
	0%   { width: 0; }
	55%  { width: 72%; }
	100% { width: 100%; }
}
@keyframes preloader-auto-out {
	to { transform: translateY(-100%); }
}

/* Reduced motion: no wipe, no counter theatre — just get out of the way. */
@media (prefers-reduced-motion: reduce) {
	.preloader { animation: preloader-auto-fade 0.3s linear 1.2s forwards; }
	.preloader__logo,
	.preloader__wordmark { opacity: 1; transform: none; animation: none; }
	.preloader__bar-fill { animation: none; width: 100%; }
	.preloader.is-done,
	.preloader.is-done .preloader__curtain,
	.preloader.is-done .preloader__inner { transition: none; }
	.preloader.is-done { transform: none; opacity: 0; }
}
@keyframes preloader-auto-fade {
	to { opacity: 0; visibility: hidden; }
}

/* =========================================================================
   14. INTERACTION LAYER

   Appended last on purpose: these are additive states (focus, hover, active)
   that must win over the component rules above without each component having
   to re-declare them. The theme previously shipped almost no :focus-visible
   styling, so keyboard users had no idea where they were.
   ========================================================================= */

/* --- Keyboard focus ------------------------------------------------------
   :focus-visible only, so a mouse click never leaves a ring behind. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--color-pistachio);
	outline-offset: 3px;
	border-radius: 2px;
}
/* On dark bands the pistachio ring can sit on a dark photo — add a white
   companion so it is legible either way. */
.site-footer a:focus-visible,
.grand-show a:focus-visible,
.mobile-menu a:focus-visible,
.mobile-menu button:focus-visible,
.preloader a:focus-visible {
	outline-color: var(--color-white);
}

/* The skip link should actually appear when tabbed to. */
.skip-link:focus {
	position: fixed;
	top: var(--space-sm);
	left: var(--space-sm);
	z-index: 10000;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 0.75rem 1.25rem;
	background: var(--color-black);
	color: var(--color-white);
	font-weight: 700;
}

/* --- Inline links --------------------------------------------------------
   Body-copy links get an underline that grows from the left on hover rather
   than a hard text-decoration flip. Scoped to prose so cards/nav are spared. */
.entry__content a:not([class]),
.faq-item__a a:not([class]),
.slife-note__text a:not([class]),
.site-footer__about a:not([class]) {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size 0.3s ease, color var(--transition);
}
.entry__content a:not([class]):hover,
.faq-item__a a:not([class]):hover,
.slife-note__text a:not([class]):hover,
.site-footer__about a:not([class]):hover { background-size: 100% 1px; }

/* --- Cards ---------------------------------------------------------------
   A consistent lift + border tint for every card that links somewhere. */
.posts-grid .entry,
.icon-card,
.news-card,
.work-card,
.story-card,
.result-card,
.council-item {
	transition:
		transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.28s ease,
		border-color var(--transition);
}
.posts-grid .entry:hover,
.icon-card:hover,
.news-card:hover,
.work-card:hover,
.story-card:hover,
.result-card:hover,
.council-item:hover {
	transform: translateY(-3px);
	border-color: var(--color-pistachio);
}
.posts-grid .entry:focus-within,
.news-card:focus-within,
.work-card:focus-within { border-color: var(--color-pistachio); }

/* Card imagery settles slightly under the pointer. */
.news-card__media img,
.work-card__media img,
.story-card__media img,
.teacher-card__photo img {
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}
.news-card:hover .news-card__media img,
.work-card:hover .work-card__media img,
.story-card:hover .story-card__media img,
.teacher-card:hover .teacher-card__photo img { transform: scale(1.04); }

/* --- Forms ---------------------------------------------------------------
   The base input only moved its border colour; give focus a real ring and a
   quiet hover so fields feel live. */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover { border-color: var(--color-muted); }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
	border-color: var(--color-pistachio);
	box-shadow: 0 0 0 3px rgba(172, 185, 72, 0.22);
}
/* Checkboxes/radios pick up the brand colour instead of the UA blue. */
input[type="checkbox"],
input[type="radio"] { accent-color: var(--color-pistachio); }

/* --- Pointer affordance -------------------------------------------------- */
button:not([disabled]),
summary,
[role="button"],
label[for] { cursor: pointer; }

/* --- Touch --------------------------------------------------------------
   Hover-only reveals are a dead end on touch: show the resting state and drop
   the lift, which otherwise sticks after a tap. */
@media (hover: none) {
	.posts-grid .entry:hover,
	.icon-card:hover,
	.news-card:hover,
	.work-card:hover,
	.story-card:hover,
	.result-card:hover,
	.council-item:hover { transform: none; }

	.news-card:hover .news-card__media img,
	.work-card:hover .work-card__media img,
	.story-card:hover .story-card__media img,
	.teacher-card:hover .teacher-card__photo img { transform: none; }
}

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

/* =========================================================================
   FACULTY — new sections: booklet/Instagram actions, careers, showcase,
   success stories. (template-parts/faculty/{about,careers,showcase,stories}.php)
   ========================================================================= */

/* --- «О программе»: booklet download + department Instagram -------------- */
.faculty-about__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm) var(--space-md);
	margin-top: var(--space-md);
}
.faculty-about__booklet-size {
	font-weight: 500;
	font-size: var(--fs-2xs);
	opacity: 0.6;
}
.faculty-about__instagram {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	color: var(--color-text);
	transition: color var(--transition);
}
.faculty-about__instagram svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	transition: transform var(--transition);
}
.faculty-about__instagram:hover { color: var(--program-accent, var(--color-pistachio-dark)); }
.faculty-about__instagram:hover svg { transform: scale(1.1); }

/* --- «Будущая профессия» ------------------------------------------------- */
.faculty-careers__lead {
	max-width: 68ch;
	margin-bottom: var(--space-lg);
	color: var(--color-muted);
	font-size: var(--fs-2xl);
}
.faculty-careers__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--color-border);
}
/* A ruled matrix rather than cards — the list is long and cards would turn it
   into a wall of boxes. */
.faculty-career {
	position: relative;
	padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
	border-bottom: 1px solid var(--color-border);
	border-right: 1px solid var(--color-border);
	transition: background var(--transition);
}
.faculty-career:nth-child(3n) { border-right: 0; }
.faculty-career::before {
	content: "";
	position: absolute;
	left: var(--space-md);
	top: 50%;
	width: 8px;
	height: 8px;
	background: var(--program-accent, var(--color-pistachio));
	transform: translateY(-50%) scale(0.7);
	transition: transform var(--transition);
}
.faculty-career:hover { background: var(--color-surface); }
.faculty-career:hover::before { transform: translateY(-50%) scale(1); }
.faculty-career__title { font-size: var(--fs-xl); font-weight: 500; }

/* --- «Лучшие работы» — audiovisual showcase ------------------------------ */
.faculty-showcase__lead {
	max-width: 68ch;
	margin-bottom: var(--space-lg);
	color: var(--color-muted);
	font-size: var(--fs-lg);
}
.faculty-showcase__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}
.showcase-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	transition: border-color var(--transition), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.showcase-card:hover { border-color: var(--program-accent, var(--color-pistachio)); transform: translateY(-3px); }

.showcase-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-dark);
}
.showcase-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity var(--transition);
}
.showcase-card:hover .showcase-card__media img { transform: scale(1.04); opacity: 0.85; }

/* Play affordance — the whole point of the section is that these are watchable. */
.showcase-card__play {
	position: absolute;
	left: 50%;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--color-black);
	transform: translate(-50%, -50%);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), background var(--transition);
}
.showcase-card__play svg { width: 28px; height: 28px; margin-left: 3px; }
.showcase-card:hover .showcase-card__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: var(--program-accent, var(--color-pistachio));
}
.showcase-card--static .showcase-card__media { background: var(--color-surface); }

.showcase-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-md);
}
.showcase-card__meta {
	margin-bottom: var(--space-xs);
	color: var(--program-accent, var(--color-pistachio-dark));
	font-size: var(--fs-2xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.showcase-card__title { margin-bottom: 0.35rem; font-size: var(--fs-xl); line-height: var(--lh-tight); }
.showcase-card__author {
	margin-bottom: var(--space-xs);
	font-size: var(--fs-md);
	font-weight: 500;
}
.showcase-card__text {
	margin-bottom: 0;
	color: var(--color-muted);
	font-size: var(--fs-md);
	line-height: 1.55;
}

/* --- «Истории успеха» ---------------------------------------------------- */
.faculty-stories__lead-text {
	max-width: 68ch;
	margin-bottom: var(--space-lg);
	color: var(--color-muted);
	font-size: var(--fs-lg);
}

/* Lead story — photo beside the full account. */
/* Lead (first) story: a compact card — a sensibly sized photo beside the copy,
   vertically centred — rather than a full-width band with a towering portrait
   image and a wall of empty space next to short text. */
.story-lead {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: var(--space-lg);
	align-items: center;
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid var(--color-border);
}
.story-lead--no-photo { grid-template-columns: 1fr; }
/* Lone story: no grid follows it, so drop the divider and contain the width. */
.story-lead--solo {
	max-width: 860px;
	padding-bottom: 0;
	border-bottom: 0;
}
.story-lead__media {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--color-surface);
}
.story-lead__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.story-lead__name { margin-bottom: var(--space-xs); font-size: var(--fs-h3); }
.story-lead__meta {
	margin-bottom: var(--space-xs);
	color: var(--color-muted);
	font-size: var(--fs-md);
}
.story-lead__award {
	margin-bottom: var(--space-md);
	padding-left: var(--space-sm);
	border-left: 3px solid var(--program-accent, var(--color-pistachio));
	font-size: var(--fs-lg);
	font-weight: 500;
}
.story-lead__text { color: var(--color-text); }
.story-lead__text p { margin-bottom: var(--space-sm); }
.story-lead__text p:last-child { margin-bottom: 0; }
.story-lead__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}
.story-lead__video { margin-top: var(--space-md); }
.story-lead__actions .story-lead__video { margin-top: 0; }

/* Story CPT rich grid card: keep the «Читать» link pinned to the card bottom
   so cards of unequal text length still line up. */
.faculty-stories__grid .story-card__link { margin-top: auto; align-self: flex-start; }
.faculty-stories__grid .story-card__link + .story-card__video { margin-top: var(--space-xs); }

/* Remaining stories — compact cards. */
.faculty-stories__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
	margin: var(--space-lg) 0 0;
	padding: 0;
	list-style: none;
}
.story-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-top: 3px solid var(--program-accent, var(--color-pistachio));
}
.story-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface); }
.story-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-md); }
.story-card__name { margin-bottom: 0.2rem; font-size: var(--fs-xl); }
.story-card__meta { margin-bottom: var(--space-xs); color: var(--color-muted); font-size: var(--fs-sm); }
.story-card__award { margin-bottom: var(--space-xs); font-size: var(--fs-md); font-weight: 500; }
.story-card__text {
	margin-bottom: var(--space-sm);
	color: var(--color-muted);
	font-size: var(--fs-md);
	line-height: 1.55;
}
.story-card__video {
	margin-top: auto;
	align-self: flex-start;
	font-weight: 700;
	font-size: var(--fs-md);
	color: var(--color-black);
	border-bottom: 2px solid var(--program-accent, var(--color-pistachio));
}
.story-card__video:hover { color: var(--program-accent, var(--color-pistachio-dark)); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1280px) {
	.faculty-careers__list { grid-template-columns: repeat(2, 1fr); }
	.faculty-career:nth-child(3n) { border-right: 1px solid var(--color-border); }
	.faculty-career:nth-child(2n) { border-right: 0; }
	.faculty-showcase__grid,
	.faculty-stories__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
	.story-lead { grid-template-columns: 1fr; gap: var(--space-md); }
	.story-lead__media { aspect-ratio: 16 / 9; }
}

@media (max-width: 768px) {
	.faculty-careers__list { grid-template-columns: 1fr; }
	.faculty-career,
	.faculty-career:nth-child(3n),
	.faculty-career:nth-child(2n) { border-right: 0; }
	.faculty-showcase__grid,
	.faculty-stories__grid { grid-template-columns: 1fr; }
	.faculty-careers__lead { font-size: var(--fs-xl); }
}

/* 30. Consultation form — field validation + result toast -----------------
   Shared by every [data-consult-form] (CTA, contacts, faculty promo, …). The
   inline .consult-form__message is left in the markup for a11y fallback but the
   visible result is the slide-in toast below. */

[data-consult-form] input.is-invalid,
[data-consult-form] select.is-invalid {
	border-color: var(--color-error);
	border-bottom-color: var(--color-error);
}
.consult-field__error {
	display: block;
	margin-top: 0.35rem;
	color: var(--color-error);
	font-size: var(--fs-2xs);
	line-height: 1.3;
}
/* Dark promo forms (faculty apply / excursion) need a lighter red to read. */
.faculty-promo [data-consult-form] input.is-invalid { border-bottom-color: #ff8a80; }
.faculty-promo .consult-field__error { color: #ff8a80; }

.consult-toast-root {
	position: fixed;
	z-index: 9000;
	right: clamp(var(--space-sm), 3vw, var(--space-md));
	bottom: clamp(var(--space-sm), 3vw, var(--space-md));
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	width: min(380px, calc(100vw - 2 * var(--space-sm)));
	pointer-events: none;
}
.consult-toast {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem 2.25rem 1rem 1.125rem;
	background: var(--color-white);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-primary);
	box-shadow: 0 12px 34px rgba(20, 25, 35, 0.18);
	overflow: hidden;
	pointer-events: auto;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity var(--transition), transform var(--transition);
}
.consult-toast.is-visible { opacity: 1; transform: translateY(0); }
.consult-toast.is-leaving { opacity: 0; transform: translateY(14px); }
.consult-toast--error { border-left-color: var(--color-error); }
.consult-toast__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--color-primary) 16%, transparent);
	color: var(--color-primary-dark);
}
.consult-toast--error .consult-toast__icon {
	background: color-mix(in srgb, var(--color-error) 14%, transparent);
	color: var(--color-error);
}
.consult-toast__body { flex: 1 1 auto; min-width: 0; }
.consult-toast__title {
	display: block;
	font-weight: 600;
	font-size: var(--fs-base);
	line-height: 1.25;
}
.consult-toast__text {
	display: block;
	margin-top: 0.2rem;
	color: var(--color-muted);
	font-size: var(--fs-sm);
	line-height: 1.4;
}
.consult-toast__close {
	position: absolute;
	top: 0.35rem;
	right: 0.4rem;
	width: 1.75rem;
	height: 1.75rem;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-muted);
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	transition: color var(--transition);
}
.consult-toast__close:hover { color: var(--color-text); }
.consult-toast__bar {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	transform-origin: left center;
	background: var(--color-primary);
	animation: consultToastBar 6s linear forwards;
}
.consult-toast--error .consult-toast__bar { background: var(--color-error); }
@keyframes consultToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-width: 600px) {
	.consult-toast-root { left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm); width: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.consult-toast { transition: opacity var(--transition); transform: none; }
	.consult-toast.is-visible,
	.consult-toast.is-leaving { transform: none; }
	.consult-toast__bar { animation: none; display: none; }
}