/* Tokens */

:root {
	--ff-blue: #3ab0e1;
	--night: #191d34;
	--night-2: #232845;
	--night-3: #2e3456;
	--blue-50: #eef8fd;
	--blue-100: #d6effa;
	--blue-200: #addff4;
	--blue-300: #7ccced;
	--blue-600: #2196c8;
	--blue-700: #1878a3;
	--blue-800: #135c7d;
	--grey-50: #f6f6f7;
	--grey-100: #ececed;
	--grey-200: #d9d9db;
	--grey-300: #b9babc;
	--grey-500: #5d5e60;
	--grey-700: #3a3b3d;
	--black: #000;
	--white: #fff;

	--font-display: "Dederon Sans", Arial, sans-serif;
	--font-body: Arial, "Helvetica Neue", Helvetica, sans-serif;
	--fs-h2: clamp(34px, 7vw, 56px);
	--fs-bubble: clamp(16px, 1.6vw, 22px);

	--container: 1200px;
	--container-wide: 1440px;
	--gutter: clamp(20px, 4vw, 48px);
	--header-height: 76px;

	--radius-lg: 28px;
	--radius-xl: 44px;

	--shadow-1: 0 1px 2px rgb(25 29 52 / 0.08), 0 2px 6px rgb(25 29 52 / 0.06);
	--shadow-2: 0 6px 20px rgb(25 29 52 / 0.12);
	--shadow-3: 0 18px 48px rgb(25 29 52 / 0.22);
	--shadow-pop: 0 10px 30px rgb(58 176 225 / 0.35);
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Base */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-height) + 12px);
}

body {
	margin: 0;
	overflow-x: clip;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--black);
	background: var(--white);
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Long words, e-mail addresses and URLs must never widen a column. */
p,
li,
h1,
h2,
h3,
h4,
address,
td,
th,
figcaption {
	overflow-wrap: anywhere;
}

.why > *,
.programs-grid > *,
.people > *,
.highlights > *,
.info-cards > *,
.link-cards > *,
.city-stats > *,
.bento > *,
.city-media > *,
.why__text {
	min-width: 0;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--blue-700);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--black);
}

a,
button,
summary {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

:focus-visible {
	outline: 3px solid var(--ff-blue);
	outline-offset: 3px;
}

button {
	font: inherit;
}

address {
	font-style: normal;
}

.icon {
	width: 1em;
	height: 1em;
	flex: none;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.icon-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

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

.skip-link:focus {
	z-index: 100;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 12px 20px;
	margin: 0;
	clip-path: none;
	color: var(--night);
	background: var(--white);
	border-radius: 999px;
	box-shadow: var(--shadow-2);
}

[hidden] {
	display: none !important;
}

html:not(.js) .js-only {
	display: none !important;
}

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

.container--wide {
	max-width: var(--container-wide);
}

/* Buttons, bubbles, stickers, tags */

.btn {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 3px 26px 0;
	font: 700 17px/1 var(--font-display);
	letter-spacing: 0.01em;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: 999px;
	transition: transform 140ms var(--ease-out), background 240ms, color 240ms, box-shadow 240ms, border-color 240ms;
}

.btn:active {
	transform: scale(0.96);
}

.btn--small {
	min-height: 38px;
	padding: 3px 18px 0;
	font-size: 15px;
}

.btn--large {
	min-height: 60px;
	padding: 3px 34px 0;
	font-size: 20px;
}

.btn--primary {
	color: var(--white);
	background: var(--ff-blue);
}

.btn--primary:hover {
	color: var(--white);
	background: var(--blue-600);
	box-shadow: var(--shadow-pop);
}

.btn--outline {
	color: var(--ff-blue);
	background: transparent;
	border-color: var(--ff-blue);
}

.btn--outline:hover {
	color: var(--white);
	background: var(--ff-blue);
}

.btn--white {
	color: var(--black);
	background: var(--white);
}

.btn--white:hover {
	color: var(--white);
	background: var(--night);
}

.apply-btn {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	height: 46px;
	padding: 3px 6px 0 20px;
	font: 700 15px/1 var(--font-display);
	color: var(--white);
	white-space: nowrap;
	text-decoration: none;
	background: var(--ff-blue);
	border-radius: 999px;
	transition: transform 300ms var(--ease-spring), background 240ms, box-shadow 300ms;
}

.apply-btn__icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-top: -3px;
	font-size: 17px;
	color: var(--night);
	background: var(--white);
	border-radius: 999px;
	transition: transform 400ms var(--ease-spring), background 240ms, color 240ms;
}

.apply-btn:hover {
	color: var(--white);
	background: var(--night);
	box-shadow: 0 10px 26px rgb(25 29 52 / 0.25);
	transform: scale(1.06);
}

.apply-btn:hover .apply-btn__icon {
	color: var(--white);
	background: var(--ff-blue);
	transform: rotate(45deg);
}

.apply-btn:active {
	transform: scale(0.97);
}

.apply-btn--large {
	height: 60px;
	padding-left: 28px;
	font-size: 18px;
}

.apply-btn--large .apply-btn__icon {
	width: 46px;
	height: 46px;
	font-size: 20px;
}

.apply-btn--dark {
	background: var(--night);
}

.apply-btn--dark:hover {
	color: var(--night);
	background: var(--white);
}

.apply-btn--dark:hover .apply-btn__icon {
	color: var(--white);
	background: var(--night);
}

.icon-btn {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	font-size: 20px;
	border: 2px solid transparent;
	border-radius: 999px;
	transition: transform 240ms var(--ease-spring), background 240ms, color 240ms;
}

.icon-btn:hover {
	transform: rotate(-8deg) scale(1.06);
}

.icon-btn--outline {
	color: var(--ff-blue);
	border-color: var(--ff-blue);
}

.icon-btn--outline:hover {
	color: var(--white);
	background: var(--ff-blue);
}

.bubble {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 8px 22px 4px;
	font: 700 var(--fs-bubble)/1.15 var(--font-display);
	color: var(--ff-blue);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
	background: transparent;
	border: 2px solid var(--ff-blue);
	border-radius: 999px;
	transition: background 240ms var(--ease-out), color 240ms, transform 240ms var(--ease-spring), box-shadow 240ms;
}

.bubble--light {
	color: var(--blue-700);
}

.bubble--small {
	padding: 6px 14px 3px;
	font-size: 14px;
}

.bubble--interactive {
	cursor: pointer;
}

.bubble--interactive:hover {
	color: var(--night);
	background: var(--ff-blue);
	box-shadow: var(--shadow-pop);
	transform: scale(1.08) rotate(-2deg);
}

.bubble--light.bubble--interactive:hover,
.bubble--light[aria-pressed="true"],
.bubble--light[aria-selected="true"] {
	color: var(--white);
}

.bubble--interactive:active {
	transform: scale(0.96);
}

.bubble[aria-pressed="true"],
.bubble[aria-selected="true"] {
	color: var(--night);
	background: var(--ff-blue);
}

.bubble--link {
	text-decoration: none;
}

.bubble--link:hover {
	color: var(--blue-800);
	background: var(--blue-50);
}

.word {
	display: inline-block;
	/* Room above for diacritics and below for descenders keeps every word optically centred. */
	padding: 0.19em 0.42em 0.19em;
	font: 700 1em/0.95 var(--font-display);
	color: var(--white);
	letter-spacing: -0.035em;
	white-space: nowrap;
	background: var(--ff-blue);
	border-radius: 999px;
}

.sticker {
	--size: 56px;

	display: inline-grid;
	flex: none;
	place-items: center;
	width: var(--size);
	height: var(--size);
	font-size: calc(var(--size) * 0.5);
	line-height: 1;
	color: var(--night);
	background: var(--ff-blue);
	border-radius: 999px;
	transition: transform 480ms var(--ease-spring);
}

.sticker--sm {
	--size: 44px;
}

.sticker--lg {
	--size: 64px;
}

.sticker--xl {
	--size: 88px;
}

.sticker--white {
	background: var(--white);
}

.sticker--outline {
	color: var(--ff-blue);
	background: transparent;
	border: 2px solid var(--ff-blue);
}

/* The ring is a separate layer so the animation runs on the compositor. */
.pulse,
.video__play,
.dice {
	position: relative;
}

.pulse::after,
.video__play::after,
.dice::after {
	position: absolute;
	inset: 0;
	pointer-events: none;
	content: "";
	border-radius: inherit;
	box-shadow: 0 0 0 10px rgb(58 176 225 / 0.45);
	opacity: 0;
	animation: pulse 2.8s var(--ease-out) infinite;
	will-change: transform, opacity;
}

@keyframes pulse {

	0% {
		opacity: 1;
		transform: scale(0.85);
	}

	70%,
	100% {
		opacity: 0;
		transform: scale(1.15);
	}
}

.tag {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 2px 12px 0;
	font: 700 13px/1 var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
	border-radius: 999px;
}

.tag--blue,
.tag--level {
	color: var(--blue-800);
	background: var(--blue-100);
}

.tag--solid {
	color: var(--white);
	background: var(--ff-blue);
}

.tag--grey {
	color: var(--grey-700);
	background: var(--grey-100);
}

.tag--outline {
	color: var(--grey-500);
	border: 1.5px solid currentcolor;
}

.tabs {
	display: inline-flex;
	gap: 4px;
	max-width: 100%;
	padding: 5px;
	background: var(--grey-100);
	border-radius: 999px;
}

.tabs__tab {
	min-height: 44px;
	padding: 3px 22px 0;
	font: 700 16px/1.2 var(--font-display);
	color: var(--grey-500);
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 999px;
	transition: background 240ms var(--ease-out), color 240ms;
}

.tabs__tab:hover {
	color: var(--black);
}

.tabs__tab[aria-selected="true"] {
	color: var(--black);
	background: var(--white);
	box-shadow: var(--shadow-1);
}

.eyebrow {
	margin: 0 0 14px;
	font: 700 13px/1 var(--font-display);
	color: var(--blue-700);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.socials {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	margin: 20px 0 0;
	list-style: none;
}

/* Header */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--white);
	border-bottom: 1px solid var(--grey-100);
}

.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 0);
}

/* Below 600px the admin bar scrolls away with the page. */
@media (max-width: 600px) {

	.admin-bar .site-header {
		top: 0;
	}
}

.site-header__inner {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	max-width: var(--container-wide);
	padding: 8px 16px;
	margin-inline: auto;
}

.site-header__logo {
	display: block;
	flex: none;
}

.site-header__logo img {
	display: block;
	width: auto;
	height: 46px;
}

.site-header__actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

.site-nav {
	position: fixed;
	inset: var(--nav-top, var(--header-height)) 0 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 16px 32px;
	overflow-y: auto;
	visibility: hidden;
	background: var(--white);
	opacity: 0;
	transition: opacity 200ms, transform 250ms var(--ease-out), visibility 0s 250ms;
	transform: translateY(-8px);
}

.site-nav > a {
	padding: 16px 20px 13px;
	font: 700 24px/1 var(--font-display);
	color: var(--black);
	text-decoration: none;
	white-space: nowrap;
	border-radius: 20px;
	transition: color 200ms, background 200ms;
}

.site-nav > a:hover {
	background: var(--grey-50);
}

.site-nav > a.is-active {
	background: var(--blue-50);
}

.site-header.is-open .site-nav {
	visibility: visible;
	opacity: 1;
	transition: opacity 200ms, transform 250ms var(--ease-out);
	transform: none;
}

.burger {
	display: grid;
	flex: none;
	gap: 5px;
	place-content: center;
	width: 44px;
	height: 44px;
	cursor: pointer;
	background: var(--grey-50);
	border: 0;
	border-radius: 999px;
	transition: background 200ms;
}

.burger:hover {
	background: var(--blue-50);
}

.burger span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--night);
	border-radius: 2px;
	transition: transform 250ms var(--ease-out), opacity 200ms;
}

.site-header.is-open .burger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.site-header.is-open .burger span:nth-child(2) {
	opacity: 0;
}

.site-header.is-open .burger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

html:not(.js) .burger {
	display: none;
}

/* With a menu, the call to action moves into it on small screens. */
.site-nav__apply {
	padding: 20px 4px 0;
}

.site-nav__apply .apply-btn {
	justify-content: space-between;
	width: 100%;
	max-width: 420px;
	font-size: 18px;
}

.js .site-header--has-menu .site-header__actions > .apply-btn {
	display: none;
}

html:not(.js) .site-nav__apply {
	display: none;
}

html:not(.js) .site-nav {
	position: static;
	display: none;
}

@media (max-width: 399px) {

	.site-header__logo img {
		height: 38px;
	}

	.site-header .apply-btn {
		gap: 6px;
		padding-left: 14px;
		font-size: 14px;
	}

	.site-header .apply-btn__icon {
		width: 30px;
		height: 30px;
	}
}

@media (min-width: 760px) {

	.site-header .apply-btn {
		height: 52px;
		padding-left: 24px;
		font-size: 17px;
	}

	.site-header .apply-btn__icon {
		width: 40px;
		height: 40px;
	}
}

@media (min-width: 1100px) {

	.site-header__inner {
		gap: 24px;
		padding: 10px var(--gutter);
	}

	.site-header__logo img {
		height: 52px;
	}

	.site-nav,
	html:not(.js) .site-nav {
		position: static;
		display: flex;
		flex: 1;
		flex-direction: row;
		gap: 4px;
		justify-content: flex-end;
		min-width: 0;
		padding: 0;
		overflow: visible;
		visibility: visible;
		background: none;
		opacity: 1;
		transform: none;
	}

	.site-nav > a {
		padding: 12px 16px 10px;
		font-size: 16px;
		color: var(--grey-500);
		border-radius: 999px;
	}

	.site-nav > a:hover,
	.site-nav > a.is-active {
		color: var(--black);
	}

	.burger {
		display: none;
	}

	.site-nav__apply {
		display: none;
	}

	.js .site-header--has-menu .site-header__actions > .apply-btn {
		display: inline-flex;
	}
}

/* Sections */

.site-main {
	display: block;
}

.section {
	padding-block: 56px;
}

.section--muted {
	background: var(--grey-50);
}

.section--night {
	color: var(--white);
	background: var(--night);
}

.section--blue {
	color: var(--white);
	background: var(--ff-blue);
}

.section__title {
	margin: 0 0 20px;
	font-size: var(--fs-h2);
	line-height: 1.02;
}

.section--night .section__title,
.section--blue .section__title {
	color: var(--white);
}

.section--night .eyebrow {
	color: var(--ff-blue);
}

.section__head {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 20px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.section__head .section__title {
	margin: 0;
}

.section__photos {
	margin-top: 32px;
}

.section__intro {
	max-width: 720px;
	margin-bottom: 32px;
}

@media (min-width: 900px) {

	.section {
		padding-block: 96px;
	}
}

.split {
	display: grid;
	gap: 32px;
}

.split > * {
	min-width: 0;
}

@media (min-width: 900px) {

	.split {
		grid-template-columns: 1fr 1fr;
		gap: 64px;
		align-items: center;
	}

	.split--top {
		align-items: start;
	}

	.split--single {
		grid-template-columns: minmax(0, 860px);
	}
}

/* Prose */

.prose > :first-child {
	margin-top: 0;
}

.prose > :last-child {
	margin-bottom: 0;
}

.prose p,
.prose ul,
.prose ol {
	margin: 0 0 16px;
}

.prose h3,
.prose h4 {
	margin: 32px 0 12px;
	font-size: 24px;
}

.prose h4 {
	font-size: 20px;
}

.prose ul {
	padding: 0;
	list-style: none;
}

.prose ul > li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 8px;
}

.prose ul > li::before {
	position: absolute;
	top: 0.6em;
	left: 4px;
	width: 8px;
	height: 8px;
	content: "";
	background: var(--ff-blue);
	border-radius: 999px;
}

.prose ol {
	padding-left: 1.4em;
}

.prose figure {
	margin: 24px 0;
}

.prose img {
	display: block;
	border-radius: var(--radius-lg);
}

.prose .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 24px 0;
}

.prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 3px 26px 0;
	font: 700 17px/1 var(--font-display);
	color: var(--white);
	text-decoration: none;
	background: var(--ff-blue);
	border-radius: 999px;
	transition: background 240ms, box-shadow 240ms;
}

.prose .wp-block-button__link:hover {
	background: var(--blue-600);
	box-shadow: var(--shadow-pop);
}

.prose table {
	width: 100%;
	border-collapse: collapse;
}

.prose td,
.prose th {
	padding: 10px 12px;
	vertical-align: top;
	border-bottom: 1px solid var(--grey-200);
}

.prose .wp-block-table {
	overflow-x: auto;
}

.prose .is-style-highlight {
	position: relative;
	padding: 20px 24px 20px 76px;
	margin: 28px 0;
	background: var(--white);
	border-radius: var(--radius-lg);
}

.section--white .prose .is-style-highlight,
.site-main > .entry .prose .is-style-highlight {
	background: var(--blue-50);
}

.section--night .prose .is-style-highlight {
	background: var(--night-2);
}

.prose .is-style-highlight::before {
	position: absolute;
	top: 16px;
	left: 16px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	font-size: 20px;
	content: "💡";
	background: var(--ff-blue);
	border-radius: 999px;
}

.prose .is-style-highlight p:last-child {
	margin-bottom: 0;
}

.section--night .prose {
	color: var(--blue-100);
}

.section--night a:not([class]) {
	font-weight: 700;
	color: var(--ff-blue);
}

.section--night a:not([class]):hover,
.section--blue a:not([class]):hover {
	color: var(--white);
	text-decoration-thickness: 2.5px;
}

.section--blue a:not([class]) {
	font-weight: 700;
	color: var(--white);
}

.prose--lead {
	font-size: 19px;
}

/* Photos */

.photo {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	color: inherit;
	text-decoration: none;
	cursor: zoom-in;
	border-radius: var(--radius-lg);
}

.photo__img {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--night-2);
	border-radius: inherit;
}

.photo__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--ease-out);
}

.photo:hover .photo__img img {
	transform: scale(1.06);
}

.photo__zoom {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	font-size: 18px;
	color: var(--night);
	background: var(--white);
	border-radius: 999px;
	opacity: 0;
	transition: opacity 200ms, transform 300ms var(--ease-spring);
	transform: scale(0.7);
}

.photo:hover .photo__zoom,
.photo:focus-visible .photo__zoom {
	opacity: 1;
	transform: none;
}

.photo__label {
	position: absolute;
	bottom: 12px;
	left: 12px;
	z-index: 1;
	max-width: calc(100% - 24px);
	padding: 7px 14px 5px;
	overflow: hidden;
	font: 700 13px/1 var(--font-display);
	color: var(--white);
	text-overflow: ellipsis;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
	background: var(--night);
	border-radius: 999px;
}

.photo--big {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 10;
}

.photo--map {
	aspect-ratio: auto;
	cursor: zoom-in;
}

.photo--map .photo__img {
	position: relative;
	background: var(--blue-50);
}

.photo--map .photo__label {
	display: none;
}

.photo--map .photo__img img {
	height: auto;
	object-fit: contain;
}

.collage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.collage--1 .photo--big {
	aspect-ratio: 21 / 9;
}

.collage--2 .photo,
.collage--2 .photo--big {
	grid-column: auto;
	aspect-ratio: 4 / 3;
}

.collage--stack .photo,
.collage--stack.collage--2 .photo {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 10;
}

.collage--stack.collage--3 .photo:not(.photo--big),
.collage--stack.collage--4 .photo:not(.photo--big) {
	grid-column: auto;
	aspect-ratio: 4 / 3;
}

@media (min-width: 900px) {

	.collage {
		gap: 16px;
	}

	.collage--3:not(.collage--stack),
	.collage--4:not(.collage--stack) {
		grid-template-columns: 2fr 1fr 1fr;
	}

	.collage--3:not(.collage--stack) .photo--big,
	.collage--4:not(.collage--stack) .photo--big {
		grid-row: span 2;
		grid-column: 1;
		aspect-ratio: auto;
	}

	.collage--3:not(.collage--stack) .photo:nth-child(3) {
		grid-column: 2 / 4;
		aspect-ratio: 16 / 7;
	}

	.collage--mosaic .photo--wide {
		grid-column: 2 / 4;
		aspect-ratio: 16 / 9;
	}

	.photo__label {
		bottom: 18px;
		left: 18px;
	}
}

@media (max-width: 599px) {

	.photo {
		border-radius: 22px;
	}

	.collage {
		gap: 10px;
	}

	.collage--mosaic .photo--wide {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 9;
	}
}

/* Marquee */

.marquee {
	padding: 10px 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
	display: flex;
	gap: 10px;
	width: max-content;
	animation: marquee var(--duration, 60s) linear infinite;
	will-change: transform;
}

.marquee--reverse .marquee__track {
	animation-direction: reverse;
}

.marquee.is-paused .marquee__track {
	animation-play-state: paused;
}

.marquee__list {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 0;
	margin: 0;
	list-style: none;
}

.marquee .bubble {
	padding: 10px 16px 7px;
	font-size: 15px;
}

.marquee .bubble--interactive:hover {
	box-shadow: 0 3px 8px rgb(58 176 225 / 0.35);
	transform: scale(1.05) rotate(-1.5deg);
}

@keyframes marquee {

	to {
		transform: translateX(calc(-50% - 5px));
	}
}

@media (min-width: 900px) {

	.marquee .bubble {
		padding: 9px 22px 5px;
		font-size: 19px;
	}
}

/* Front page hero */

.hero {
	position: relative;
	padding: 0 0 22px;
	overflow: hidden;
	color: var(--white);
	background: var(--night);
	isolation: isolate;
}

.hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Fades the photo into the background colour at the edges. */
.hero::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
	background:
		linear-gradient(90deg, var(--night) 0%, rgb(25 29 52 / 0) 14%, rgb(25 29 52 / 0) 86%, var(--night) 100%),
		linear-gradient(180deg, rgb(25 29 52 / 0.6) 0%, rgb(25 29 52 / 0) 22%, rgb(25 29 52 / 0) 62%, var(--night) 100%);
}

.hero__main {
	display: grid;
	gap: 28px;
	padding-block: 40px 24px;
}

.slogan {
	display: grid;
	gap: 18px;
	max-width: 760px;
	margin: 0;
	font-size: clamp(54px, 17vw, 120px);
}

.slogan__line {
	display: flex;
	gap: 12px;
	align-items: center;
}

.slogan__line--end {
	justify-content: flex-end;
}

.slogan .word {
	animation: pop 700ms var(--ease-spring) both;
}

.slogan__line:nth-child(2) .word {
	animation-delay: 120ms;
}

.slogan__line:nth-child(3) .word {
	animation-delay: 240ms;
}

.sticker--slogan {
	--size: clamp(44px, 13vw, 64px);

	font-size: clamp(20px, 6vw, 30px);
	animation: bob 4.5s ease-in-out infinite alternate;
}

.slogan__line--end .sticker--slogan {
	animation-duration: 5.5s;
	animation-delay: -2s;
}

.slogan__line:nth-child(3) .sticker--slogan {
	animation-duration: 3.8s;
	animation-delay: -1s;
}

.hero__title {
	margin: 0 0 10px;
	font-size: clamp(28px, 8vw, 48px);
	color: var(--white);
}

.hero__lead {
	max-width: 520px;
	margin: 0 0 22px;
	font: 700 17px/1.45 var(--font-body);
	color: var(--blue-200);
}

@keyframes pop {

	from {
		opacity: 0;
		transform: scale(0.9) translateY(8px);
	}
}

@keyframes bob {

	from {
		transform: translate3d(0, -6px, 0) rotate(-8deg);
	}

	to {
		transform: translate3d(0, 6px, 0) rotate(10deg);
	}
}

@media (min-width: 900px) {

	.hero {
		padding: 0 0 36px;
	}

	.hero__main {
		padding-block: 72px 40px;
	}

	.hero::before {
		background:
			linear-gradient(90deg, var(--night) 0%, rgb(25 29 52 / 0) 22%, rgb(25 29 52 / 0) 78%, var(--night) 100%),
			linear-gradient(180deg, rgb(25 29 52 / 0.6) 0%, rgb(25 29 52 / 0) 22%, rgb(25 29 52 / 0) 62%, var(--night) 100%);
	}
}

@media (min-width: 1000px) {

	.hero__main {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		gap: 48px;
		align-items: center;
	}

	.slogan {
		gap: 26px;
		font-size: clamp(80px, 9vw, 150px);
	}
}

/* Announcement */

.announcement {
	padding: 20px 0 0;
	background: var(--white);
}

.announcement__bubble {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	padding: 22px 20px 20px;
	color: var(--black);
	background: #faef52;
	border-radius: 28px;
}

.announcement__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	font-size: 20px;
	color: #faef52;
	background: var(--black);
	border-radius: 999px;
}

.announcement__icon .icon {
	stroke-width: 3.25;
}

.announcement__title {
	margin: 0 0 4px;
	font: 700 clamp(19px, 2.2vw, 24px)/1.2 var(--font-display);
}

.announcement__text {
	font-size: 16px;
	line-height: 1.5;
}

.announcement__text a {
	color: var(--black);
	text-decoration-thickness: 2px;
}

.announcement__link {
	grid-column: 1 / -1;
	justify-content: center;
	color: #faef52;
	background: var(--black);
}

.announcement__link:hover {
	color: var(--black);
	background: var(--white);
}

@media (min-width: 800px) {

	.announcement {
		padding-top: 28px;
	}

	.announcement__bubble {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 24px;
		padding: 20px 22px 20px 20px;
		border-radius: 999px;
	}

	.announcement__icon {
		width: 60px;
		height: 60px;
		font-size: 26px;
	}

	.announcement__link {
		grid-column: auto;
	}
}

/* Extra wide screens get a wider, larger header. */
@media (min-width: 1800px) {

	:root {
		--container-wide: min(1760px, 88vw);
	}

	.hero__main {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: 72px;
		padding-block: 96px 56px;
	}

	.slogan {
		max-width: none;
		font-size: clamp(150px, 8.4vw, 210px);
	}

	.sticker--slogan {
		--size: 84px;

		font-size: 40px;
	}

	.hero__title {
		font-size: 64px;
	}

	.hero__lead {
		max-width: 640px;
		font-size: 21px;
	}

	.marquee .bubble {
		padding: 11px 26px 7px;
		font-size: 22px;
	}
}

/* Bento */

.bento {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: space-between;
	min-height: 132px;
	padding: 18px;
	margin: 0;
	overflow: hidden;
	border-radius: 24px;
	transition: transform 300ms var(--ease-out), box-shadow 300ms;
}

.tile:hover {
	box-shadow: var(--shadow-2);
	transform: translateY(-4px);
}

.tile__num {
	font: 700 clamp(36px, 11vw, 56px)/0.9 var(--font-display);
	letter-spacing: -0.03em;
	white-space: nowrap;
}

.tile__label {
	font: 700 14px/1.3 var(--font-display);
}

.tile--blue {
	color: var(--white);
	background: var(--ff-blue);
}

.tile--night {
	color: var(--white);
	background: var(--night);
}

.tile--night .tile__num {
	color: var(--ff-blue);
}

.tile--line {
	border: 2px solid var(--ff-blue);
}

.tile--line .tile__num {
	color: var(--blue-700);
}

.tile--grey {
	background: var(--grey-50);
}

.tile--text {
	display: block;
	grid-column: 1 / -1;
	font-size: 16px;
	background: var(--grey-50);
}

.tile--text:hover {
	box-shadow: none;
	transform: none;
}

.tile--photo {
	grid-column: 1 / -1;
	min-height: 220px;
	padding: 0;
}

.apply-tile {
	grid-column: 1 / -1;
	min-height: 170px;
	color: var(--white);
	text-decoration: none;
	background: var(--ff-blue);
	isolation: isolate;
	transition: transform 400ms var(--ease-spring), box-shadow 400ms;
}

.apply-tile::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
	background: var(--night);
	border-radius: inherit;
	transition: clip-path 650ms var(--ease-out);
	clip-path: circle(0% at calc(100% - 50px) 50px);
}

.apply-tile__arrow {
	position: absolute;
	top: 16px;
	right: 16px;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	font-size: 24px;
	color: var(--night);
	background: var(--white);
	border-radius: 999px;
	transition: transform 500ms var(--ease-spring), background 300ms, color 300ms;
}

.apply-tile__title {
	padding-right: 70px;
	margin-top: auto;
	font: 700 clamp(30px, 9vw, 48px)/1 var(--font-display);
	letter-spacing: -0.02em;
	transition: transform 400ms var(--ease-spring);
}

.apply-tile__sub {
	font: 700 15px var(--font-display);
	opacity: 0.85;
}

.apply-tile:hover,
.apply-tile:focus-visible {
	color: var(--white);
	box-shadow: 0 24px 50px rgb(58 176 225 / 0.45);
	transform: scale(1.03) rotate(-0.6deg);
}

.apply-tile:hover::before {
	clip-path: circle(150% at calc(100% - 50px) 50px);
}

.apply-tile:hover .apply-tile__arrow {
	color: var(--white);
	background: var(--ff-blue);
	transform: rotate(45deg) scale(1.15);
}

.apply-tile:hover .apply-tile__title {
	transform: translateX(6px);
}

@media (min-width: 600px) {

	.bento {
		gap: 12px;
	}

	.tile {
		min-height: 150px;
		padding: 22px;
		border-radius: var(--radius-lg);
	}

	.tile__label {
		font-size: 15px;
	}

	.tile--text {
		font-size: 17px;
	}

	.apply-tile__arrow {
		top: 18px;
		right: 18px;
		width: 64px;
		height: 64px;
		font-size: 28px;
	}
}

@media (min-width: 1100px) {

	.bento {
		grid-template-columns: repeat(4, 1fr);
		gap: 16px;
	}

	.tile {
		min-height: 190px;
		padding: 28px;
	}

	.tile__num {
		font-size: clamp(48px, 4.6vw, 72px);
	}

	.tile--text {
		grid-row: span 2;
		grid-column: span 2;
		font-size: 19px;
	}

	.tile--wide,
	.apply-tile {
		grid-column: span 2;
	}

	.tile--photo {
		min-height: 0;
	}
}

/* Video */

.video {
	position: relative;
	width: 100%;
	max-height: 100svh;
	overflow: hidden;
	background: var(--black);
	aspect-ratio: 16 / 9;
}

.video__poster,
.video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video__poster {
	object-fit: cover;
}

.video iframe {
	z-index: 1;
	pointer-events: none;
}

.video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: clamp(76px, 13vw, 148px);
	height: clamp(76px, 13vw, 148px);
	font-size: clamp(30px, 5vw, 56px);
	color: var(--white);
	background: var(--ff-blue);
	border-radius: 999px;
	transition: transform 350ms var(--ease-spring);
	transform: translate(-50%, -50%);
}

.video__play:hover {
	color: var(--white);
	transform: translate(-50%, -50%) scale(1.12);
}

.video.is-loaded .video__play {
	display: none;
}

.video__controls {
	position: absolute;
	bottom: 16px;
	left: 16px;
	z-index: 3;
	display: flex;
	gap: 8px;
}

.video__btn {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 48px;
	padding: 0;
	font: 700 15px/1 var(--font-display);
	color: var(--white);
	cursor: pointer;
	background: rgb(25 29 52 / 0.72);
	border: 0;
	border-radius: 999px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background 200ms;
}

.video__btn .icon {
	font-size: 20px;
}

.video__btn:hover {
	background: var(--ff-blue);
}

.video__btn--wide {
	padding: 3px 18px 0 14px;
}

.video__btn--wide .icon {
	margin-top: -3px;
}

.video__icon-play,
.video__icon-sound,
.video.is-paused .video__icon-pause,
.video.has-sound .video__icon-muted {
	display: none;
}

.video.is-paused .video__icon-play,
.video.has-sound .video__icon-sound {
	display: block;
}

@media (min-width: 900px) {

	.video__controls {
		bottom: 32px;
		left: 32px;
		gap: 10px;
	}

	.video__btn {
		min-width: 54px;
		height: 54px;
		font-size: 16px;
	}
}

@media (max-width: 420px) {

	.video__btn--wide {
		width: 48px;
		padding: 0;
	}

	.video__btn--wide span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.video__btn--wide .icon {
		margin: 0;
	}
}

/* University town */

.statement {
	margin: 24px 0 0;
	font: 700 clamp(22px, 3vw, 28px)/1.2 var(--font-display);
	color: var(--white);
}

.city-media {
	display: grid;
	gap: 12px;
}

.city-video {
	position: relative;
	overflow: hidden;
	background: var(--night);
	border-radius: var(--radius-lg);
	aspect-ratio: 16 / 9;
}

.city-video__poster,
.city-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.city-video__poster {
	object-fit: cover;
}

.city-video .video__play {
	width: clamp(64px, 9vw, 104px);
	height: clamp(64px, 9vw, 104px);
	font-size: clamp(26px, 3.4vw, 40px);
}

.city-video.is-loaded .video__play {
	display: none;
}

.city-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.stat {
	padding: 14px 16px;
	color: var(--white);
	background: var(--night);
	border-radius: 24px;
}

.stat__num {
	display: block;
	font: 700 clamp(20px, 6vw, 30px)/1 var(--font-display);
	white-space: nowrap;
	color: var(--ff-blue);
	font-variant-numeric: tabular-nums;
}

.stat__label {
	display: block;
	margin-top: 6px;
	font: 700 14px/1.3 var(--font-display);
}

@media (min-width: 900px) {

	.stat__num {
		font-size: clamp(24px, 2.6vw, 36px);
	}
}

@media (min-width: 600px) {

	.city-stats {
		gap: 12px;
	}

	.stat {
		padding: 16px 18px;
	}
}

/* Program explorer */

.picker {
	padding: 20px 16px;
	margin-bottom: 32px;
	color: var(--white);
	background: var(--night);
	border-radius: var(--radius-lg);
}

.picker__head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 4px;
}

.picker__title {
	margin: 0;
	font: 700 22px var(--font-display);
}

.picker__dice {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-top: 12px;
	font: 700 16px var(--font-display);
	color: var(--blue-200);
}

.picker__stage + .picker__dice {
	margin-top: 16px;
}

.dice {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	padding: 3px 20px 0 8px;
	font: 700 15px/1 var(--font-display);
	color: var(--white);
	cursor: pointer;
	background: var(--ff-blue);
	border: 0;
	border-radius: 999px;
	transition: transform 300ms var(--ease-spring), background 200ms;
}

.dice__icon {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin-top: -3px;
	font-size: 18px;
	background: var(--white);
	border-radius: 999px;
	transition: transform 500ms var(--ease-spring);
}

.dice:hover {
	transform: scale(1.06);
}

.dice:hover .dice__icon {
	transform: rotate(180deg);
}

.dice.is-spinning {
	cursor: wait;
	background: var(--night-3);
}

.dice.is-spinning::after {
	animation: none;
}

.dice.is-spinning .dice__icon {
	animation: spin 500ms linear infinite;
}

.picker__stage {
	display: flex;
	justify-content: center;
	min-height: 56px;
	padding: 6px 0 0;
	margin: 0;
}

.picker__stage[hidden] {
	display: none;
}

.picker__stage .bubble {
	padding: 12px 20px 9px;
	font-size: 20px;
	color: var(--white);
	background: var(--ff-blue);
	border-color: var(--ff-blue);
}

.picker__stage .bubble.is-popping {
	animation: stage-pop 160ms var(--ease-out);
}

.picker__stage .bubble.is-landed {
	animation: land 700ms var(--ease-spring);
}

@keyframes stage-pop {

	from {
		opacity: 0.2;
		transform: scale(0.7) translateY(6px);
	}
}

.picker__result {
	margin: 18px 0 0;
	font: 700 18px/1.3 var(--font-display);
	animation: pop 500ms var(--ease-spring);
}

.picker__result strong {
	color: var(--ff-blue);
}

@keyframes spin {

	to {
		transform: rotate(360deg);
	}
}

@keyframes land {

	40% {
		transform: scale(1.25) rotate(-3deg);
	}
}

.explorer__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	margin-bottom: 24px;
}

.tabs--wide {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	border-radius: 24px;
}

.tabs--wide .tabs__tab {
	min-height: 48px;
	padding: 9px 10px 7px;
	font-size: 14px;
	text-wrap: balance;
	border-radius: 20px;
}

.form-filter {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.form-filter__btn {
	min-height: 40px;
	padding: 3px 16px 0;
	font: 700 15px/1 var(--font-display);
	color: var(--grey-700);
	cursor: pointer;
	background: var(--white);
	border: 2px solid var(--grey-100);
	border-radius: 999px;
	transition: background 200ms, color 200ms, border-color 200ms;
}

.form-filter__btn:hover {
	border-color: var(--ff-blue);
}

.form-filter__btn[aria-pressed="true"] {
	color: var(--white);
	background: var(--ff-blue);
	border-color: var(--ff-blue);
}

.search {
	position: relative;
	display: flex;
	flex: 1 1 260px;
	align-items: center;
}

.search .icon {
	position: absolute;
	left: 20px;
	font-size: 20px;
	color: var(--grey-500);
	pointer-events: none;
}

.search__input {
	width: 100%;
	height: 52px;
	padding: 0 22px 0 50px;
	font: 16px var(--font-body);
	color: var(--black);
	background: var(--white);
	border: 2px solid var(--grey-200);
	border-radius: 999px;
	outline: none;
	transition: border-color 240ms, box-shadow 240ms;
	-webkit-appearance: none;
	appearance: none;
}

.search__input:hover {
	border-color: var(--grey-300);
}

.search__input:focus {
	border-color: var(--ff-blue);
	box-shadow: 0 0 0 4px var(--blue-100);
}

.explorer__count {
	margin: 0 0 12px;
	font: 700 16px var(--font-display);
	color: var(--blue-700);
}

.explorer__level + .explorer__level {
	margin-top: 40px;
}

.explorer__level-title {
	margin-bottom: 16px;
	font-size: 26px;
}

.js .explorer__level-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.js .explorer__level[hidden] {
	display: none;
}

.js .explorer__level + .explorer__level {
	margin-top: 0;
}

.accordion {
	border-top: 2px solid var(--black);
}

.accordion:last-child {
	border-bottom: 2px solid var(--black);
}

.accordion__title {
	min-width: 0;
	overflow-wrap: break-word;
	hyphens: auto;
}

.accordion__head {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 20px 0 18px;
	font: 700 clamp(20px, 5.6vw, 24px)/1.15 var(--font-display);
	cursor: pointer;
	list-style: none;
}

.accordion__head::-webkit-details-marker {
	display: none;
}

.accordion__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-left: auto;
	font-size: 20px;
	background: var(--grey-100);
	border-radius: 999px;
	transition: transform 240ms var(--ease-spring), background 240ms, color 240ms;
}

.accordion__head:hover .accordion__icon {
	background: var(--blue-100);
}

.accordion[open] .accordion__icon {
	color: var(--white);
	background: var(--ff-blue);
	transform: rotate(45deg);
}

.program-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 0 24px;
	margin: 0;
	list-style: none;
}

.program-link {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 11px 16px 9px;
	font: 700 15px/1.2 var(--font-display);
	color: var(--black);
	text-decoration: none;
	background: var(--white);
	border: 2px solid var(--grey-100);
	border-radius: 999px;
	transition: border-color 240ms var(--ease-out), background 240ms, color 240ms, opacity 240ms;
}

.program-link .icon {
	font-size: 14px;
}

a.program-link:hover {
	color: var(--black);
	border-color: var(--ff-blue);
}

.program-link.is-hit {
	color: var(--white);
	background: var(--ff-blue);
	border-color: var(--ff-blue);
}

.program-link.is-dim {
	opacity: 0.35;
}

.link-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
	margin-top: 32px;
}

.card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px;
	color: var(--black);
	text-decoration: none;
	background: var(--white);
	border: 2px solid var(--grey-100);
	border-radius: var(--radius-lg);
	transition: transform 240ms var(--ease-out), box-shadow 240ms, border-color 240ms;
}

.card--interactive:hover {
	color: var(--black);
	border-color: var(--ff-blue);
	box-shadow: var(--shadow-2);
	transform: translateY(-4px);
}

.card--brand,
.card--brand:hover {
	color: var(--white);
	background: var(--ff-blue);
	border-color: var(--ff-blue);
}

.card__eyebrow,
.card__body {
	font: 16px/1.55 var(--font-body);
	opacity: 0.85;
}

.card__eyebrow {
	font-weight: 700;
}

.card__title {
	font: 700 24px/1.1 var(--font-display);
	letter-spacing: -0.01em;
}

@media (min-width: 600px) {

	.picker {
		padding: 28px;
		border-radius: var(--radius-xl);
	}

	.dice {
		width: auto;
		height: 44px;
	}

	.tabs--wide {
		display: inline-flex;
		width: auto;
		border-radius: 999px;
	}

	.tabs--wide .tabs__tab {
		min-height: 44px;
		padding: 3px 22px 0;
		font-size: 16px;
		border-radius: 999px;
	}
}

/* Open days */

.open-days {
	display: grid;
	gap: 12px;
}

.open-days__list {
	display: grid;
	gap: 12px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.date-pill {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 8px 16px 8px 8px;
	border: 2px solid var(--ff-blue);
	border-radius: 999px;
	transition: background 240ms, transform 300ms var(--ease-spring);
}

.date-pill:hover {
	background: var(--night-2);
	transform: scale(1.02);
}

.date-pill .sticker {
	--size: 48px;

	font-size: 22px;
}

.date-pill__day {
	display: block;
	font: 700 13px var(--font-display);
	color: var(--ff-blue);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.date-pill__value {
	display: block;
	font: 700 clamp(18px, 5.4vw, 30px)/1.05 var(--font-display);
	white-space: nowrap;
}

.date-pill__time {
	max-width: 80px;
	margin-left: auto;
	font: 700 13px/1.25 var(--font-display);
	color: var(--blue-200);
	text-align: right;
}

.open-days .cta-row {
	margin-top: 6px;
}

.open-days__note {
	margin: 10px 0 0;
	font: 700 22px var(--font-display);
}

.section--open-day .collage {
	margin-top: 40px;
}

@media (min-width: 600px) {

	.date-pill {
		gap: 14px;
		padding-right: 22px;
	}

	.date-pill .sticker {
		--size: 60px;

		font-size: 28px;
	}

	.date-pill__time {
		max-width: none;
		font-size: 14px;
	}
}

/* Student life */

.section__head .sticker {
	--size: 48px;

	font-size: 24px;
}

.life {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 132px;
	grid-auto-flow: dense;
	gap: 10px;
}

.life .photo {
	height: 100%;
	aspect-ratio: auto;
	border-radius: 20px;
}

.life__item--1 {
	grid-row: span 2;
	grid-column: span 2;
}

.life__item--4,
.life__item--7 {
	grid-row: span 2;
}

.life--10 .life__item--10 {
	grid-column: span 2;
}

@media (min-width: 900px) {

	.life {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 220px;
		gap: 16px;
	}

	.life .photo {
		border-radius: var(--radius-lg);
	}

	.life__item--6,
	.life__item--9,
	.life--9 .life__item--8 {
		grid-column: span 2;
	}

	.life--10 .life__item--10 {
		grid-column: auto;
	}

	.life__item--7 {
		grid-row: auto;
	}
}

/* Students from Slovakia */

.slovakia-media {
	display: grid;
	gap: 14px;
}

.trains {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.train {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
	padding: 14px 12px;
	text-align: center;
	border: 2px solid var(--ff-blue);
	border-radius: 24px;
}

.train .icon {
	font-size: 20px;
	color: var(--blue-700);
}

.train__city {
	font: 700 15px/1.3 var(--font-display);
}

.train__time {
	font: 700 24px var(--font-display);
	color: var(--blue-700);
}

@media (max-width: 599px) {

	.trains {
		grid-template-columns: minmax(0, 1fr);
	}

	.train {
		flex-direction: row;
		gap: 12px;
		padding: 12px 22px;
		text-align: left;
		border-radius: 999px;
	}

	.train__time {
		margin-left: auto;
		font-size: 20px;
	}
}

@media (min-width: 600px) {

	.train {
		border-radius: 999px;
	}
}

/* Program page hero */

.program-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: calc(100svh - var(--header-height));
	overflow: hidden;
	color: var(--white);
	background: var(--night);
	isolation: isolate;
}

.program-hero::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	content: "";
	background: linear-gradient(180deg, rgb(25 29 52 / 0.6) 0%, rgb(25 29 52 / 0.78) 55%, var(--night) 100%);
}

.program-hero__bg {
	position: absolute;
	top: -15%;
	left: 0;
	z-index: -2;
	width: 100%;
	height: 130%;
	object-fit: cover;
	will-change: transform;
}

.program-hero__inner {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding-top: 16px;
	padding-bottom: 28px;
}

.back-link {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	align-self: flex-start;
	min-height: 44px;
	padding: 12px 0;
	font: 700 15px var(--font-display);
	color: var(--blue-200);
	text-decoration: none;
	transition: color 200ms, gap 300ms var(--ease-spring);
}

.back-link:hover {
	gap: 12px;
	color: var(--white);
}

.program-hero__main {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 900px;
	margin: 20px auto 0;
	text-align: center;
}

.program-title {
	--size: clamp(24px, 4.6vw, 46px);

	max-width: 100%;
	margin: 0 0 20px;
	font-size: var(--size);
	line-height: 1.62;
}

.program-title--s {
	--size: clamp(38px, 11vw, 104px);

	line-height: 1.2;
}

.program-title--m {
	--size: clamp(28px, 6.4vw, 64px);
}

/* Dederon caps and diacritics sit high: more padding above than below centres the text. */
.program-title__bubble {
	display: inline;
	padding: 0.2em 0.4em 0.08em;
	font: 700 var(--size)/1.18 var(--font-display);
	color: var(--white);
	letter-spacing: -0.02em;
	overflow-wrap: normal;
	hyphens: none;
	background: var(--ff-blue);
	border-radius: 999px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.program-title--s .program-title__bubble {
	display: inline-block;
	max-width: 100%;
	padding: 0.26em 0.42em 0.06em;
	line-height: 1.08;
	border-radius: 999px;
}

.program-hero__lead {
	max-width: 600px;
	margin: 0 auto 26px;
	font: 16px/1.5 var(--font-body);
	color: var(--white);
	text-wrap: balance;
}

.program-hero .cta-row {
	justify-content: center;
	width: 100%;
}

.program-hero .cta-row > * {
	flex: 1 1 100%;
	justify-content: space-between;
}

.program-hero .btn {
	justify-content: center;
}

.program-hero .socials {
	justify-content: center;
}

.program-hero__marquee {
	padding: 6px 0 18px;
}

@media (min-width: 600px) {

	.program-hero .cta-row > * {
		flex: 0 0 auto;
	}

	.program-hero__lead {
		font-size: clamp(17px, 2vw, 21px);
	}
}

@media (min-width: 1000px) {

	.program-hero {
		min-height: min(820px, calc(100svh - var(--header-height)));
	}

	.program-hero__inner {
		padding-top: 24px;
		padding-bottom: 40px;
	}
}

/* Program sections */

.why {
	display: grid;
	gap: 12px;
}

.why__item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 18px;
	background: var(--grey-50);
	border-radius: 24px;
}

.why__item p {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
}

.why__item p + p {
	margin-top: 0.6em;
}

.why__num {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	padding-top: 3px;
	font: 700 20px/1 var(--font-display);
	color: var(--white);
	background: var(--ff-blue);
	border-radius: 999px;
}

.why__title {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.2;
}

.why__item--lead {
	color: var(--white);
	background: var(--ff-blue);
}

.why__item--lead p {
	font: 700 clamp(19px, 2.2vw, 24px)/1.35 var(--font-display);
}

.why__item--lead .sticker {
	--size: 52px;

	font-size: 26px;
}

@media (min-width: 600px) {

	.why__item {
		padding: 22px;
		border-radius: var(--radius-lg);
	}

	.why__num {
		width: 52px;
		height: 52px;
		font-size: 24px;
	}

	.why__item p {
		font-size: 17px;
	}
}

@media (min-width: 900px) {

	.why {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.why__item {
		flex-direction: column;
		padding: 28px;
	}

	.why__item--lead {
		flex-direction: row;
		grid-column: 1 / -1;
		gap: 24px;
		align-items: center;
		padding: 32px 36px;
	}
}

.programs-grid {
	display: grid;
	gap: 12px;
	margin-bottom: 28px;
}

.program-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px;
	background: var(--white);
	border: 2px solid transparent;
	border-radius: 24px;
	transition: border-color 200ms;
}

.program-card:hover {
	border-color: var(--ff-blue);
}

.program-card[hidden] {
	display: none;
}

.program-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.program-card__title {
	margin: 0;
	font-size: clamp(22px, 2.4vw, 28px);
	line-height: 1.1;
}

.program-card__text {
	font-size: 16px;
	line-height: 1.55;
	color: var(--grey-500);
}

.program-card__text p {
	margin: 0 0 0.6em;
}

.program-card__text > :last-child {
	margin-bottom: 0;
}

.js [data-filter-items] .tag--level,
.js [data-filter-items] .program-card__tags:not(:has(li:not(.tag--level))) {
	display: none;
}

.programs-notes {
	margin-bottom: 28px;
}

@media (max-width: 599px) {

	.section--programy .tabs {
		display: flex;
		width: 100%;
	}

	.section--programy .tabs__tab {
		flex: 1 1 auto;
		padding: 3px 8px 0;
		font-size: 15px;
	}
}

@media (max-width: 379px) {

	.section--programy .tabs {
		gap: 2px;
	}

	.section--programy .tabs__tab {
		padding: 3px 4px 0;
		font-size: 14px;
	}
}

.program-card__link {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding-top: 10px;
	margin-top: auto;
	font: 700 15px var(--font-display);
	color: var(--blue-700);
	text-decoration: none;
}

.program-card__arrow {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: var(--blue-50);
	border-radius: 999px;
	transition: background 200ms, color 200ms;
}

.program-card__link:hover {
	color: var(--blue-700);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.program-card__link:hover .program-card__arrow {
	color: var(--white);
	background: var(--ff-blue);
}

.info-cards {
	display: grid;
	gap: 12px;
	margin-top: 16px;
}

.info-card {
	display: grid;
	gap: 10px;
	padding: 22px;
	color: var(--white);
	text-decoration: none;
	background: var(--night);
	border-radius: 24px;
}

.info-card--blue {
	background: var(--ff-blue);
}

.info-card:hover {
	color: var(--white);
}

.info-card__eyebrow {
	font: 700 12px/1 var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.85;
}

.info-card__title {
	font: 700 clamp(20px, 2.4vw, 26px)/1.15 var(--font-display);
}

.info-card__text {
	font: 16px/1.5 var(--font-body);
	color: var(--blue-100);
}

.info-card__foot {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: auto;
	font: 700 15px var(--font-display);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	transition: text-decoration-color 200ms;
}

.info-card:hover .info-card__foot {
	text-decoration-color: currentcolor;
}

@media (min-width: 600px) {

	.program-card {
		padding: 26px;
		border-radius: var(--radius-lg);
	}

	.info-card {
		padding: 26px 28px;
		border-radius: var(--radius-lg);
	}
}

@media (min-width: 700px) {

	.info-cards {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 900px) {

	.programs-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
}

.highlights {
	display: grid;
	gap: 12px;
	margin-bottom: 40px;
}

.highlights__item {
	display: grid;
	gap: 14px;
	align-content: start;
	padding: 20px;
	border: 2px solid var(--ff-blue);
	border-radius: 24px;
}

.highlights__item p {
	margin: 0;
	font: 700 17px/1.45 var(--font-display);
	color: var(--white);
}

@media (min-width: 900px) {

	.highlights {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}

	.highlights__item {
		padding: 28px;
		border-radius: var(--radius-lg);
	}
}

.checks {
	display: grid;
	gap: 14px;
	padding: 0;
	margin: 0 0 24px;
	list-style: none;
}

.checks li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	line-height: 1.55;
}

.prose .checks {
	margin-bottom: 24px;
}

.prose .checks > li {
	padding-left: 0;
	margin-bottom: 0;
}

.prose .checks > li::before {
	content: none;
}

.section--night .checks li {
	color: var(--blue-100);
}

.checks__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 28px;
	height: 28px;
	margin-top: -1px;
	font-size: 15px;
	color: var(--white);
	background: var(--ff-blue);
	border-radius: 999px;
}

.split__main > :last-child {
	margin-bottom: 0;
}

.jobs {
	display: grid;
	gap: 20px;
}

.jobs__list {
	display: none;
}

.js .jobs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-content: start;
}

.jobs__list .bubble {
	padding: 10px 16px 7px;
	white-space: normal;
	text-align: left;
}

.jobs__panel {
	display: grid;
	gap: 16px;
	align-content: start;
	padding: 24px;
	color: var(--white);
	background: var(--ff-blue);
	border-radius: var(--radius-lg);
}

.jobs__panel p {
	margin: 0;
	font: 700 clamp(19px, 2.4vw, 26px)/1.3 var(--font-display);
}

.jobs__panel .jobs__title {
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.85;
}

.js .jobs__panel:not(.is-active) {
	display: none;
}

.js .jobs__panel {
	animation: pop 480ms var(--ease-spring);
}

.js .jobs__panel .jobs__title {
	display: none;
}

@media (min-width: 900px) {

	.jobs__panel {
		padding: 40px;
		border-radius: var(--radius-xl);
	}

	.split--single .jobs {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
		align-items: start;
	}
}

.abroad {
	display: grid;
	gap: 24px;
	align-items: start;
}

.abroad__stickers {
	display: flex;
	gap: 10px;
	align-items: center;
}

.abroad__stickers .sticker--xl {
	--size: 68px;
}

.abroad__text .section__title {
	margin-bottom: 16px;
}

@media (min-width: 600px) {

	.abroad__stickers .sticker--xl {
		--size: 88px;
	}
}

@media (min-width: 900px) {

	.abroad {
		grid-template-columns: auto 1fr;
		gap: 64px;
	}
}

.people__intro {
	max-width: 760px;
	margin-bottom: 32px;
}

.people {
	--people-gap: 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 24px var(--people-gap);
	justify-content: center;
}

.person {
	display: flex;
	flex: 0 0 100%;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.person__photo {
	display: grid;
	place-items: center;
	overflow: hidden;
	font: 700 40px var(--font-display);
	color: var(--blue-700);
	background: var(--blue-100);
	border-radius: 999px;
	aspect-ratio: 1;
}

.person__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.person__name {
	margin: 0;
	font-size: 20px;
	line-height: 1.15;
}

.person__bio {
	font-size: 15px;
	line-height: 1.55;
	color: var(--grey-500);
}

.person__bio p {
	margin: 0 0 8px;
}

.people__more {
	margin: 40px 0 0;
	font: 700 clamp(20px, 2.4vw, 26px)/1.2 var(--font-display);
	text-align: center;
}

@media (max-width: 599px) {

	.people {
		row-gap: 40px;
	}

	.person {
		align-items: center;
		max-width: 420px;
		text-align: center;
	}

	.person__photo {
		width: min(240px, 70%);
	}
}

@media (min-width: 600px) {

	.people {
		--people-gap: 28px;
		row-gap: 40px;
	}

	.person {
		flex-basis: calc((100% - 2 * var(--people-gap)) / 3);
	}
}

@media (min-width: 1100px) {

	.people {
		--people-gap: 56px;
	}

	.person {
		max-width: 260px;
	}
}

.related {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding-top: 32px;
	padding-bottom: 56px;
}

.related::before {
	display: block;
	flex: 1 0 100%;
	margin-bottom: 22px;
	content: "";
	border-top: 2px solid var(--grey-100);
}

.related__title {
	width: 100%;
	margin: 0 0 4px;
	font: 700 18px var(--font-display);
}

.related__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.related .bubble {
	padding: 11px 18px 8px;
	white-space: normal;
	text-align: center;
}

@media (min-width: 600px) {

	.related__title {
		width: auto;
		margin: 0 8px 0 0;
	}

	.related .bubble {
		padding: 8px 22px 4px;
	}
}

.section--cta {
	position: relative;
	padding-block: 48px;
	overflow: hidden;
	isolation: isolate;
}

/* Taller than the section so the parallax shift never reveals an edge. */
.section__bg {
	position: absolute;
	top: -15%;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 130%;
	object-fit: cover;
	object-position: 70% center;
	will-change: transform;
}

/* On narrow screens the photo is zoomed in; a soft tint keeps the heading readable. */
@media (max-width: 699px) {

	.section--cta::before {
		position: absolute;
		inset: 0;
		z-index: -1;
		content: "";
		background: linear-gradient(180deg, rgb(58 176 225 / 0.7) 0%, rgb(58 176 225 / 0.25) 60%, rgb(58 176 225 / 0.1) 100%);
	}
}

.cta-band {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 24px;
	align-items: center;
	justify-content: space-between;
}

.cta-band .section__title {
	margin: 0;
}

.cta-band .cta-row {
	width: 100%;
}

.cta-band .cta-row > * {
	flex: 1 1 100%;
	justify-content: space-between;
}

.cta-band .btn {
	justify-content: center;
}

@media (min-width: 600px) {

	.cta-band .cta-row {
		width: auto;
	}

	.cta-band .cta-row > * {
		flex: 0 0 auto;
	}
}

@media (min-width: 900px) {

	.section--cta {
		padding-block: 56px;
	}
}

/* Regular pages */

.page-hero {
	padding-block: 48px 40px;
	color: var(--white);
	background: var(--night);
}

.page-hero__title {
	font-size: clamp(32px, 6vw, 56px);
	color: var(--white);
}

.entry__content {
	max-width: 820px;
	padding-block: 48px 72px;
}

.page-header {
	padding-block: 48px 24px;
}

.page-title {
	font-size: clamp(32px, 6vw, 56px);
}

.entry--summary {
	padding-block: 24px;
	border-bottom: 1px solid var(--grey-100);
}

.entry--summary .entry__title {
	font-size: 28px;
}

.no-results,
.error-404 {
	padding-bottom: 72px;
}

.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 560px;
	margin-top: 24px;
}

.search-form label {
	flex: 1 1 240px;
}

.search-form .search-field {
	width: 100%;
	height: 52px;
	padding: 0 22px;
	font: 16px var(--font-body);
	border: 2px solid var(--grey-200);
	border-radius: 999px;
	outline: none;
	transition: border-color 240ms, box-shadow 240ms;
	-webkit-appearance: none;
	appearance: none;
}

.search-form .search-field:focus {
	border-color: var(--ff-blue);
	box-shadow: 0 0 0 4px var(--blue-100);
}

.search-form .search-submit {
	height: 52px;
	padding: 3px 26px 0;
	font: 700 17px/1 var(--font-display);
	color: var(--white);
	cursor: pointer;
	background: var(--ff-blue);
	border: 0;
	border-radius: 999px;
	transition: background 240ms;
}

.search-form .search-submit:hover {
	background: var(--blue-600);
}

/* Footer */

.site-footer {
	color: var(--white);
	background: var(--night);
}

.site-footer__inner {
	padding-top: clamp(48px, 9vw, 72px);
	padding-bottom: 32px;
}

.social-cards {
	display: grid;
	gap: 12px;
}

.social-card {
	display: grid;
	gap: 14px;
	align-content: start;
	padding: 20px;
	background: var(--night-2);
	border-radius: 24px;
	transition: background 300ms;
}

.social-card:hover {
	background: var(--night-3);
}

.social-card__head {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 0;
}

.social-card__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	font-size: 22px;
	color: var(--white);
	background: var(--ff-blue);
	border-radius: 999px;
	transition: transform 500ms var(--ease-spring);
}

.social-card:hover .social-card__icon {
	transform: rotate(-12deg) scale(1.08);
}

.social-card__name {
	font: 700 22px/1 var(--font-display);
	letter-spacing: -0.01em;
}

.social-card__links {
	padding: 0;
	margin: 0;
	list-style: none;
}

.social-card__links a {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0 10px;
	font: 700 15px/1.25 var(--font-display);
	color: var(--blue-100);
	text-decoration: none;
	border-top: 1px solid rgb(255 255 255 / 0.1);
	transition: color 200ms, padding 300ms var(--ease-spring);
}

.social-card__links .icon {
	color: var(--ff-blue);
	transition: transform 300ms var(--ease-spring);
}

.social-card__links a:hover {
	padding-left: 6px;
	color: var(--white);
}

.social-card__links a:hover .icon {
	transform: translate(3px, -3px);
}

.site-footer__info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 32px;
	align-items: end;
	margin-top: 56px;
}

.site-footer__logo {
	display: block;
	width: 240px;
	height: auto;
}

.site-footer__address {
	font: 15px/1.6 var(--font-body);
	color: var(--blue-100);
}

.site-footer__address strong {
	color: var(--white);
}

.site-footer__apps {
	font: 14px/1.6 var(--font-body);
	color: var(--blue-100);
}

.site-footer__apps p {
	margin: 0 0 8px;
}

.site-footer__apps a {
	display: inline-block;
	margin-right: 8px;
}

.site-footer__apps img {
	display: block;
	width: auto;
	height: 40px;
}

.site-footer__address .footer-link {
	display: inline-block;
	padding-block: 6px 4px;
}

.footer-link,
.site-footer__legal a {
	padding-bottom: 2px;
	color: var(--blue-100);
	text-decoration: none;
	background: linear-gradient(var(--ff-blue), var(--ff-blue)) 0 100% / 0 2px no-repeat;
	transition: background-size 300ms var(--ease-out), color 200ms;
}

.footer-link:hover,
.site-footer__legal a:hover {
	color: var(--white);
	background-size: 100% 2px;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	padding-top: 12px;
	margin-top: 40px;
	font: 13px var(--font-body);
	border-top: 1px solid var(--night-3);
}

.site-footer__legal a {
	padding-block: 10px;
}

@media (min-width: 600px) {

	.social-card {
		padding: 22px;
		border-radius: var(--radius-lg);
	}

	.social-card__name {
		font-size: 24px;
	}
}

@media (min-width: 760px) {

	.social-cards {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
}

/* Lightbox */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	padding: 72px 16px;
	margin: 0;
	background: rgb(25 29 52 / 0.92);
	border: 0;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	animation: fade 240ms var(--ease-out);
}

.lightbox:not([open]) {
	display: none;
}

.lightbox::backdrop {
	background: transparent;
}

.lightbox__figure {
	display: grid;
	gap: 14px;
	max-width: min(1200px, 100%);
	margin: 0;
	animation: pop 420ms var(--ease-spring);
}

.lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100svh - 180px);
	margin: 0 auto;
	object-fit: contain;
	border-radius: var(--radius-lg);
}

.lightbox__caption {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	font: 700 18px var(--font-display);
	color: var(--white);
}

.lightbox__count {
	font-size: 14px;
	color: var(--blue-200);
}

.lightbox__button {
	position: fixed;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	font-size: 22px;
	color: var(--night);
	cursor: pointer;
	background: var(--ff-blue);
	border: 0;
	border-radius: 999px;
	transition: transform 240ms var(--ease-spring);
}

.lightbox__button:hover {
	transform: scale(1.08);
}

.lightbox__close {
	top: 16px;
	right: 16px;
	width: 48px;
	height: 48px;
	background: var(--grey-100);
}

.lightbox__prev,
.lightbox__next {
	bottom: 16px;
}

.lightbox__prev {
	left: 16px;
}

.lightbox__next {
	right: 16px;
}

@media (min-width: 701px) {

	.lightbox__prev,
	.lightbox__next {
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
	}

	.lightbox__prev:hover,
	.lightbox__next:hover {
		transform: translateY(-50%) scale(1.08);
	}
}

@keyframes fade {

	from {
		opacity: 0;
	}
}

/* Touch and motion preferences */

@media (hover: none) {

	.tile:hover,
	.apply-tile:hover,
	.date-pill:hover,
	.apply-btn:hover,
	.dice:hover,
	.bubble--interactive:hover,
	.card--interactive:hover {
		box-shadow: none;
		transform: none;
	}

	.apply-tile:hover::before {
		clip-path: circle(0% at calc(100% - 50px) 50px);
	}

	.apply-tile:hover .apply-tile__arrow,
	.apply-tile:hover .apply-tile__title,
	.apply-btn:hover .apply-btn__icon {
		transform: none;
	}

	.apply-btn:hover {
		background: var(--ff-blue);
	}

	.apply-btn--dark:hover {
		color: var(--white);
		background: var(--night);
	}

	.photo:hover .photo__img img,
	.tile--photo:hover img {
		transform: none;
	}

	.photo__zoom {
		width: 36px;
		height: 36px;
		font-size: 16px;
		opacity: 1;
		transform: none;
	}

	.program-card:hover {
		border-color: transparent;
	}

	.social-card__links a:hover {
		padding-left: 0;
	}

	.tile:active,
	.apply-tile:active,
	.program-card:active,
	.info-card:active,
	.photo:active,
	.date-pill:active {
		transition: transform 120ms;
		transform: scale(0.98);
	}

	.apply-btn:active,
	.dice:active,
	.bubble--interactive:active {
		transition: transform 120ms;
		transform: scale(0.95);
	}
}

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	.marquee__track {
		animation: none;
	}

	.marquee {
		overflow-x: auto;
		scrollbar-width: none;
	}
}

/* Phones */

@media (max-width: 699px) {

	.photo__zoom,
	.section--life .section__head .sticker {
		display: none;
	}

	.tabs--wide {
		grid-template-columns: minmax(0, 1fr);
	}

	.accordion__head {
		flex-wrap: wrap;
		gap: 10px 12px;
	}

	.accordion__head .tag {
		order: 1;
	}

	.accordion__icon {
		order: 2;
	}

	.accordion__title {
		flex: 1 0 100%;
		order: 3;
	}

	.open-days .cta-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.open-days .cta-row .btn {
		justify-content: center;
		width: 100%;
	}
}

/* Phones: everything centred, the drawn career with its clear button above the dice. */
@media (max-width: 699px) {

	.picker {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.picker__head {
		display: contents;
	}

	.picker__title {
		order: 1;
	}

	.picker__stage {
		order: 2;
		width: 100%;
		padding-top: 14px;
	}

	.picker [data-picker-clear] {
		order: 3;
		margin-top: 10px;
	}

	.picker__dice,
	.picker__stage + .picker__dice {
		flex-direction: column;
		order: 4;
		gap: 10px;
		width: 100%;
		margin-top: 18px;
	}

	.picker__result {
		order: 5;
		text-wrap: balance;
	}
}

/* Wider screens: the drawn career shows in the free space on the right. */
@media (min-width: 700px) {

	.picker {
		display: grid;
		grid-template-areas:
			"head stage"
			"dice stage"
			"result clear";
		grid-template-rows: auto auto 1fr;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 32px;
		align-items: start;
	}

	.picker__head {
		display: contents;
	}

	.picker__title {
		grid-area: head;
	}

	.picker [data-picker-clear] {
		grid-area: clear;
		justify-self: center;
		margin-top: 12px;
	}

	.picker__dice,
	.picker__stage + .picker__dice {
		grid-area: dice;
		margin-top: 16px;
	}

	.picker__result {
		grid-area: result;
	}

	.picker__stage,
	.picker__stage[hidden] {
		display: flex;
		grid-area: stage;
		align-items: center;
		align-self: stretch;
		justify-content: center;
		min-height: 120px;
		padding: 0;
	}

	.picker__stage[hidden] .bubble {
		visibility: hidden;
	}

	.picker__stage .bubble {
		max-width: 100%;
		padding: 16px 30px 12px;
		font-size: clamp(24px, 3vw, 36px);
		white-space: normal;
		text-align: center;
	}
}