/*
 * Congress — front-end styles.
 *
 * Ported from the MVP (design/mvp/wizualizacja-v2.html). Colours come from
 * theme.json presets; the aliases below keep the rules readable. The only
 * typeface is Montserrat, set once in theme.json: rules change its weight,
 * never the family.
 * Sections follow the order of the home page.
 */

/* ---------------------------------------------------------------------------
 * Tokens
 * ------------------------------------------------------------------------- */

:root {
	--ink: var(--wp--preset--color--ink);
	--ink-soft: var(--wp--preset--color--ink-soft);
	--red: var(--wp--preset--color--red);
	--crimson: var(--wp--preset--color--crimson);
	--wine: var(--wp--preset--color--wine);
	--coral: var(--wp--preset--color--coral);
	--signal: var(--wp--preset--color--signal);

	/* Brand gradient stops; used with different angles below. */
	--grad-stops: var(--wp--preset--color--plum) 0%, var(--wp--preset--color--cherry) 18%, var(--wp--preset--color--crimson) 42%, var(--wp--preset--color--red) 54%, var(--wp--preset--color--scarlet) 72%, var(--wp--preset--color--berry) 100%;
	--grad: linear-gradient(90deg, var(--grad-stops));

	/* Brandbook (BrandBook Congress XX). Everything new or reworked uses these; older sections still run on the MVP tokens above. */
	--brand-maroon: var(--wp--preset--color--brand-maroon);
	--brand-grad-stops: var(--wp--preset--color--brand-pink) 0%, var(--wp--preset--color--brand-crimson) 33%, var(--wp--preset--color--brand-red) 66%, var(--wp--preset--color--brand-deep) 100%;
	--brand-grad: linear-gradient(90deg, var(--brand-grad-stops));

	--ease-out: cubic-bezier(.2, .85, .2, 1);
	--container: 1320px;

	--white-70: rgba(255, 255, 255, .7);
	--white-30: rgba(255, 255, 255, .3);

	/* Page scale. On desktop the whole page is drawn at 90% (see below). CSS zoom also shrinks
	   viewport units, so in any rule that can apply on desktop write them as multiples of these
	   (clamp(30px, 4 * var(--vw), 48px), calc(100 * var(--vh))): they keep vw/vh as they would be
	   at 90% browser zoom. If browsers ever stop zooming viewport units (w3c/csswg-drafts#13016),
	   drop the division here. */
	--page-zoom: 1;
	--vw: calc(1vw / var(--page-zoom));
	--vh: calc(1vh / var(--page-zoom));
	--dvh: calc(1dvh / var(--page-zoom));
	--svh: calc(1svh / var(--page-zoom));
}

/* Desktop with a mouse, from the width where the full menu shows: the page looks as it does at
   90% browser zoom. Only where the standard CSS zoom exists (has-css-zoom is set in <head>,
   functions.php); phones, tablets and older browsers keep 100%. */
@media screen and (min-width: 1180px) and (hover: hover) and (pointer: fine) {
	:root.has-css-zoom {
		--page-zoom: .9;
		zoom: var(--page-zoom);
	}
}

/* ---------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------- */

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

[hidden] {
	display: none !important;
}

body {
	margin: 0;
	background: var(--ink);
	color: #fff;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

:where(a) {
	color: inherit;
	text-decoration: none;
}

:where(a:hover) {
	color: var(--red);
}

/* Montserrat (theme.json, set on body) is the only typeface: everything inherits it,
   including form fields and code or dotted separators added in the editor. */
input,
select,
textarea,
button,
code,
kbd,
pre,
samp,
.wp-block-code,
.wp-block-separator.is-style-dots::before {
	font-family: inherit;
}

::selection {
	background: var(--ink);
	color: #fff;
}

/* The design uses the browser's default line height; article content gets theme.json's 1.6 back. */
.wp-site-blocks {
	line-height: normal;
}

/* Block theme wrappers add vertical gaps between top-level blocks; sections space themselves. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

.site-main > * {
	margin-block: 0;
}

/* Inner pages (privacy policy etc.): clear the fixed navigation. */
.site-main--content {
	padding-top: 140px;
	padding-bottom: 96px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * Shared pieces
 * ------------------------------------------------------------------------- */

/* Animated brand gradient (navigation, section washes, buttons). */
.grad-flow {
	background: var(--grad);
	background-size: 220% 100%;
	animation: navShift 11s ease-in-out infinite;
}

/* Gradient-filled heading text. */
.grad-text {
	display: inline-block;
	padding-bottom: .08em;
	background: var(--grad);
	background-size: 220% 100%;
	animation: navShift 11s ease-in-out infinite;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--red);
}

.btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 999px;
	padding: 11px 22px;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	transition: background .25s ease, border-color .25s ease;
}

.btn-outline:hover {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
}

.round-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.round-btn:hover {
	background: var(--red);
	border-color: var(--red);
}

.round-btn--light {
	width: 46px;
	height: 46px;
	border-color: rgba(255, 255, 255, .28);
}

.round-btn--light:hover {
	background: #fff;
	border-color: #fff;
	color: var(--ink);
}

/* Brandbook logotype: the C symbol + "ongress", proportions taken from the logo artwork. */
.brand-logo {
	display: inline-flex;
	align-items: center;
	color: #fff;
	font-size: 32px;
	line-height: 1;
}

.brand-logo__mark {
	position: relative;
	top: .05em;
	flex-shrink: 0;
	width: 1.39em;
	height: 1.39em;
}

.brand-logo__word {
	margin-left: -.022em;
	font-weight: 400;
	letter-spacing: .015em;
}

/* The "2Congress" wordmark from the MVP (newsletter pop-up). */
.logo {
	display: flex;
	align-items: center;
	gap: 1px;
	flex-shrink: 0;
	color: #fff;
}

.logo__two,
.logo__word {
	font-size: 42px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.01em;
}

.logo__word {
	font-size: 39px;
}

.logo__mark {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	align-self: center;
	margin: 0 -12px 0 -1px;
}

.logo--small .logo__two {
	font-size: 30px;
}

.logo--small .logo__word {
	font-size: 28px;
}

.logo--small .logo__mark {
	width: 32px;
	height: 32px;
	margin: 0 -9px 0 -1px;
}

/* ---------------------------------------------------------------------------
 * Header: pill navigation with drop-downs + mobile menu (brandbook colours)
 * ------------------------------------------------------------------------- */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	padding: 14px;
	pointer-events: none;
}

.admin-bar .site-header {
	top: 32px;
}

/*
 * Once the page scrolls, whatever passes above and beside the bar is blurred
 * and dimmed, fading out just below it, so the bar stays easy to read.
 */
.site-header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--header-zone, 128px);
	background: linear-gradient(180deg, rgba(10, 10, 15, .8) 0%, rgba(10, 10, 15, .55) 60%, rgba(10, 10, 15, 0) 100%);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
	opacity: 0;
	transition: opacity .35s ease;
}

.site-header.is-scrolled::before {
	opacity: 1;
}

/* A slim bar, no wider than the page content. */
.site-nav {
	--nav-pad-y: 13px;

	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.6 * var(--vw), 24px);
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--nav-pad-y) 14px var(--nav-pad-y) 26px;
	border-radius: 999px;
	box-shadow: 0 10px 34px rgba(0, 0, 0, .32);
	pointer-events: auto;
	transition: box-shadow .3s ease;
}

.site-nav.is-scrolled {
	box-shadow: 0 16px 44px rgba(0, 0, 0, .5);
}

/*
 * Frosted glass under the gradient. It is a layer rather than a property of
 * the bar itself: a blurred ancestor would stop the drop-downs from blurring
 * the page behind them.
 */
.site-nav::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	border-radius: inherit;
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}

.site-nav__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--brand-grad);
	background-size: 220% 100%;
	animation: navShift 11s ease-in-out infinite;
	transition: opacity 1.1s ease;
}

/* Over gradient bands ("Editions", sections marked data-nav-glass) the pill turns into frosted glass. */
.site-nav.is-over-dark .site-nav__bg {
	opacity: 0;
}

.site-nav__logo {
	display: flex;
	flex-shrink: 0;
}

.site-nav__logo,
.site-nav__logo:hover {
	color: #fff;
}

/* Jubilee logo: the "ongress" letters as tall as the brandbook logotype was at 29px. */
.site-nav .jubilee-logo {
	display: block;
	width: auto;
	height: 42px;
}

.site-nav__divider {
	width: 1px;
	height: 28px;
	flex-shrink: 0;
	background: rgba(255, 255, 255, .45);
}

/* Always two lines; not shown in the burger layout. */
.site-nav__motto {
	flex-shrink: 0;
	margin: 0;
	color: rgba(255, 255, 255, .88);
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.22;
}

.site-nav__motto span {
	display: block;
	white-space: nowrap;
}

.site-nav__menu {
	flex-shrink: 0;
	margin-left: auto;
}

.menu {
	display: flex;
	align-items: center;
	gap: clamp(16px, 1.9 * var(--vw), 30px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu__item {
	position: relative;
}

.menu__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 0;
	border: 0;
	background: none;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: color .2s ease;
}

.menu__link:hover,
.menu__item.is-open > .menu__link {
	color: rgba(255, 255, 255, .72);
}

.menu__link svg {
	transition: transform .25s ease;
}

.menu__item.is-open > .menu__link svg {
	transform: rotate(180deg);
}

/* Not ready yet (CongressApp): no link; "Dostępna wkrótce" shows under it on hover and focus. */
.menu__item--soon > .menu__link {
	cursor: default;
}

.menu__tip {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	z-index: 5;
	padding: 7px 12px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 70%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--white) 90%, transparent);
	color: var(--brand-maroon);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -4px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	pointer-events: none;
}

.menu__item--soon:hover > .menu__tip,
.menu__item--soon:focus-within > .menu__tip {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition-delay: 0s;
}

.submenu {
	position: absolute;
	top: calc(100% + var(--nav-pad-y) + 10px);
	left: -24px;
	z-index: 5;
	min-width: 236px;
	margin: 0;
	padding: 10px;
	list-style: none;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 22px;
	background: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	backdrop-filter: blur(20px) saturate(1.4);
	box-shadow: 0 20px 48px rgba(0, 0, 0, .35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

/* Invisible bridge so the pointer can travel from the label to the panel. */
.submenu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: calc(var(--nav-pad-y) + 12px);
}

.menu__item.is-open > .submenu,
html:not(.js) .menu__item--parent:hover > .submenu,
html:not(.js) .menu__item--parent:focus-within > .submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.submenu a {
	display: block;
	padding: 11px 16px;
	border-radius: 13px;
	color: var(--brand-maroon);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.25;
	white-space: nowrap;
	transition: background .2s ease;
}

.submenu a:hover,
.submenu a:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--brand-pink) 12%, transparent);
	color: var(--brand-maroon);
}

/* Items that are not ready yet: muted name and a small "wkrótce" tag, no link. */
.submenu__soon {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 16px;
	color: color-mix(in srgb, var(--brand-maroon) 55%, transparent);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.25;
	white-space: nowrap;
	cursor: default;
}

.nav-soon {
	padding: 3px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--brand-pink) 12%, transparent);
	color: var(--brand-maroon);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/*
 * Language switch: one outlined block. The white chip is a single element
 * (::before) that slides under the current language; main.js sets --thumb-x
 * and --thumb-w. Until it has measured, the active button is simply white.
 */
.lang-switch {
	position: relative;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	padding: 3px;
	border: 1px solid rgba(255, 255, 255, .65);
	border-radius: 999px;
}

.lang-switch::before {
	content: "";
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 0;
	width: var(--thumb-w, 0);
	border-radius: 999px;
	background: #fff;
	opacity: 0;
	transform: translateX(var(--thumb-x, 0));
}

.lang-switch.has-thumb::before {
	opacity: 1;
}

.lang-switch.is-sliding::before {
	transition: transform .45s cubic-bezier(.3, .8, .2, 1), width .45s cubic-bezier(.3, .8, .2, 1);
}

.lang-switch__btn {
	position: relative;
	padding: 6px 13px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background .2s ease;
}

.lang-switch__btn:not(.is-active):hover {
	background: rgba(255, 255, 255, .16);
}

.lang-switch:not(.has-thumb) .lang-switch__btn.is-active {
	background: #fff;
}

/* Labels: white on the bar; on the white chip the brand gradient shows through (brandbook). */
.lang-switch__btn span {
	background: var(--brand-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: #fff;
	color: #fff;
	transition: -webkit-text-fill-color .35s ease;
}

.lang-switch__btn.is-active span {
	-webkit-text-fill-color: transparent;
}

.site-nav__contact span {
	background: var(--brand-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--wp--preset--color--brand-crimson);
}

.site-nav__contact {
	display: inline-flex;
	flex-shrink: 0;
	padding: 11px 24px;
	border-radius: 999px;
	background: #fff;
	box-shadow: inset 0 0 0 1px #fff;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	transition: background .25s ease;
}

.site-nav__contact:hover {
	background: transparent;
}

.site-nav__contact:hover span {
	background: none;
	-webkit-text-fill-color: #fff;
	color: #fff;
}

.site-nav__burger {
	display: none;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.mobile-menu {
	max-height: calc(100vh - 96px);
	max-height: calc(100dvh - 96px);
	margin-top: 10px;
	padding: 10px 22px 22px;
	overflow-y: auto;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: 24px;
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	backdrop-filter: blur(20px) saturate(1.4);
	box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
	pointer-events: auto;
}

.mobile-menu__nav {
	display: grid;
}

.mobile-menu__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 14px 4px;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--brand-maroon) 14%, transparent);
	background: none;
	color: var(--brand-maroon);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.25;
	text-align: left;
	cursor: pointer;
}

.mobile-menu__link:hover {
	color: var(--brand-maroon);
}

.mobile-menu__link svg {
	flex-shrink: 0;
	transition: transform .25s ease;
}

.mobile-menu__link[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.mobile-menu__sub {
	display: grid;
	padding: 6px 0 8px 18px;
	border-bottom: 1px solid color-mix(in srgb, var(--brand-maroon) 14%, transparent);
}

.mobile-menu__sub a {
	padding: 10px 4px;
	color: color-mix(in srgb, var(--brand-maroon) 84%, transparent);
	font-size: 17px;
	line-height: 1.25;
}

.mobile-menu__sub a:hover {
	color: var(--brand-maroon);
}

.mobile-menu__link--soon {
	justify-content: flex-start;
	cursor: default;
}

.mobile-menu__soon {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 4px;
	color: color-mix(in srgb, var(--brand-maroon) 55%, transparent);
	font-size: 17px;
	line-height: 1.25;
}

/* On the white panel the switch inverts: maroon outline and labels, gradient chip. */
.mobile-menu__lang {
	width: fit-content;
	margin-top: 20px;
	border-color: color-mix(in srgb, var(--brand-maroon) 30%, transparent);
}

.mobile-menu__lang::before,
.mobile-menu__lang:not(.has-thumb) .lang-switch__btn.is-active {
	background: var(--brand-grad);
}

.mobile-menu__lang .lang-switch__btn {
	padding: 9px 20px;
	font-size: 15px;
}

.mobile-menu__lang .lang-switch__btn:not(.is-active):hover {
	background: color-mix(in srgb, var(--brand-maroon) 8%, transparent);
}

.mobile-menu__lang .lang-switch__btn span {
	background: none;
	-webkit-text-fill-color: var(--brand-maroon);
	color: var(--brand-maroon);
}

.mobile-menu__lang .lang-switch__btn.is-active span {
	-webkit-text-fill-color: #fff;
	color: #fff;
}

/* Below this width the bar keeps only the logo and the burger (and loses the motto). */
@media (max-width: 1179px) {
	.site-header {
		--header-zone: 118px;
	}

	.site-nav {
		--nav-pad-y: 10px;

		gap: 10px;
		padding: var(--nav-pad-y) 12px var(--nav-pad-y) 18px;
	}

	.site-nav .jubilee-logo {
		height: 34px;
	}

	.site-nav__divider,
	.site-nav__motto,
	.site-nav__menu,
	.site-nav__lang,
	.site-nav__contact {
		display: none;
	}

	.site-nav__burger {
		display: flex;
	}
}

@media (min-width: 1180px) {
	.mobile-menu {
		display: none !important;
	}
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------- */

/* The first screen, always exactly one window tall (svh: without the phone's browser bars).
   Columns of square photos slide slowly up and down behind one dark veil, neighbouring
   columns in opposite directions at the same calm speed.
   The headline sits in the middle. */
.hero {
	--gap: 8px;
	/* About three photos fill the height. Short, wide windows: never more than about 5.6
	   columns, so the six distinct ones are enough. Phones: about two larger columns, so a
	   column's five photos never show twice at once. */
	--card: min(max(calc((100 * var(--svh) - 2 * var(--gap)) / 3.2), calc((100 * var(--vw) - 6 * var(--gap)) / 5.6)), calc(56 * var(--vw)));
	--per-card: 13s;
	position: relative;
	display: grid;
	place-items: center;
	height: calc(100 * var(--vh));
	height: calc(100 * var(--svh));
	min-height: 540px;
	overflow: hidden;
	padding: 96px 24px 40px;
	background: var(--ink);
	text-align: center;
}

.hero__wall {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	display: flex;
	gap: var(--gap);
	transform: translateX(-50%);
}

.hero__lane {
	flex: 0 0 var(--card);
	min-width: 0;
}

.hero__track {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	animation: heroSlide calc(var(--count) * var(--per-card)) linear infinite;
	/* Each column starts at a different height, so the photos sit like bricks. */
	animation-delay: calc(var(--lane) * -4.7s);
}

.hero__lane:nth-child(even) .hero__track {
	animation-direction: reverse;
}

.hero__photo {
	display: block;
	flex-shrink: 0;
	width: var(--card);
	height: var(--card);
	object-fit: cover;
	filter: saturate(.85);
}

/* One veil over all photos: darkest behind the text, fading into the page below. */
.hero__veil {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 58% 62% at 50% 52%, color-mix(in srgb, var(--ink) 82%, transparent) 0%, color-mix(in srgb, var(--ink) 66%, transparent) 60%, color-mix(in srgb, var(--ink) 52%, transparent) 100%),
		linear-gradient(180deg, color-mix(in srgb, var(--ink) 70%, transparent) 0%, transparent 22%, transparent 78%, var(--ink) 100%);
}

.hero__content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: var(--container);
}

/* Brandbook: on dark backgrounds text is white; the gradient appears as an accent. */
.hero__title {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: min(clamp(32px, 4 * var(--vw), 56px), calc(8 * var(--svh)));
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.03em;
	text-wrap: balance;
	animation: riseIn 1s var(--ease-out) .1s backwards;
}

/* Two sentences, each starting on its own line: who we are, then the invitation.
   On laptops and wider each sentence fits on one line, in both languages: the width
   is in em, so it follows the font size (the longest, English sentence is ~59.5em). */
.hero__lead {
	max-width: 61em;
	margin: clamp(14px, 2.2 * var(--svh), 22px) 0 0;
	font-size: clamp(15px, 1.15 * var(--vw), 17px);
	line-height: 1.55;
	text-wrap: balance;
	animation: riseIn 1s var(--ease-out) .25s backwards;
}

.hero__lead-first,
.hero__lead-next {
	display: block;
}

.hero__lead-first {
	color: var(--wp--preset--color--white);
	font-weight: 600;
}

.hero__lead-next {
	margin-top: 4px;
	color: color-mix(in srgb, var(--wp--preset--color--white) 84%, transparent);
	font-weight: 400;
}

/* The event at a glance, centred in one column: edition, skyline, then place and date.
   No closed frame: a thin line above and below and a darker band between them, all
   fading out at both ends. */
.hero__event {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: clamp(24px, 4.2 * var(--svh), 42px);
	padding: 20px 40px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 70%, transparent) 22%, color-mix(in srgb, var(--ink) 70%, transparent) 78%, transparent);
	text-align: center;
	animation: riseIn 1s var(--ease-out) .4s backwards;
}

.hero__event::before,
.hero__event::after {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--wp--preset--color--white) 45%, transparent) 25%, color-mix(in srgb, var(--wp--preset--color--white) 45%, transparent) 75%, transparent);
}

.hero__event::before {
	top: 0;
}

.hero__event::after {
	bottom: 0;
}

.hero__edition {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.hero__skyline {
	width: min(260px, calc(32 * var(--svh)));
	margin: 12px 0;
}

/* The drawing is made of filled shapes, so instead of tracing a line it is uncovered
   from left to right, the gradient ground line with it. */
.hero__skyline svg {
	display: block;
	clip-path: inset(-2px 100% -2px 0);
	animation: skyReveal 2.6s cubic-bezier(.45, .1, .2, 1) .9s forwards;
}

.hero__skyline-city {
	fill: var(--wp--preset--color--white);
	fill-rule: evenodd;
}

.hero__ground-stop--1 { stop-color: var(--wp--preset--color--brand-pink); }
.hero__ground-stop--2 { stop-color: var(--wp--preset--color--brand-crimson); }
.hero__ground-stop--3 { stop-color: var(--wp--preset--color--brand-red); }
.hero__ground-stop--4 { stop-color: var(--wp--preset--color--brand-deep); }

.hero__place {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 4px 14px;
	margin: 0;
	color: var(--wp--preset--color--white);
}

.hero__city {
	font-size: 28px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.02em;
}

/* The date in numbers: 05–06.03.2027. */
.hero__date {
	color: color-mix(in srgb, var(--wp--preset--color--white) 88%, transparent);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .14em;
	font-variant-numeric: tabular-nums;
}

.hero__note {
	margin: clamp(12px, 2 * var(--svh), 18px) 0 0;
	color: color-mix(in srgb, var(--wp--preset--color--white) 72%, transparent);
	font-size: 14px;
	font-weight: 400;
	animation: riseIn 1s var(--ease-out) .5s backwards;
}

@media (max-width: 1119px) {
	.hero {
		padding: 92px 18px 32px;
	}
}

/* Phones: the same motion behind a darker veil. */
@media (max-width: 767px) {
	.hero__veil {
		background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 82%, transparent) 0%, color-mix(in srgb, var(--ink) 72%, transparent) 50%, color-mix(in srgb, var(--ink) 90%, transparent) 100%);
	}

	.hero__event {
		align-self: stretch;
		padding: 18px 12px;
	}

	.hero__skyline {
		width: min(220px, 100%);
	}
}

/* Without motion the wall stands still, its columns still offset like bricks. */
@media (prefers-reduced-motion: reduce) {
	.hero__track {
		animation: none !important;
		transform: translateY(calc(var(--lane) * (var(--card) + var(--gap)) * -.37));
	}
}

/* ---------------------------------------------------------------------------
 * News
 * ------------------------------------------------------------------------- */

.news {
	padding: 85px 24px;
	color: #fff;
}

.news__inner {
	max-width: var(--container);
	margin: 0 auto;
}

.news__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 28px;
}

.news__title {
	margin: 0;
	color: #fff;
	font-size: clamp(24px, 3 * var(--vw), 33px);
	font-weight: 400;
	line-height: normal;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Link to the /aktualnosci/ archive, styled like the edition recap link. */
.news__all,
.news__all:hover,
.team__all,
.team__all:hover {
	padding-bottom: 4px;
	border-bottom: 1.5px solid var(--crimson);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
}

.news__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	align-items: stretch;
	gap: 8px;
}

.news__cell {
	display: flex;
	overflow: hidden;
	border-radius: 36px;
}

.news-card {
	position: relative;
	flex: 1;
	overflow: hidden;
	padding: clamp(26px, 3.2 * var(--vw), 44px);
	border-radius: 36px;
	background: linear-gradient(115deg, var(--grad-stops));
	box-shadow: 0 32px 90px rgba(0, 0, 0, .32);
}

.news-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0 0 16px;
	border-radius: 12px;
	object-fit: cover;
	object-position: 50% 25%;
}

.news-card__date {
	margin: 0 0 12px;
	color: var(--white-70);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.news-card__title {
	margin: 0 0 12px;
	color: #fff;
	font-size: clamp(19px, 2 * var(--vw), 24px);
	font-weight: 400;
	line-height: 1.16;
	letter-spacing: -.02em;
}

.news-card__text {
	margin: 0;
	color: rgba(255, 255, 255, .85);
	font-size: 14px;
	line-height: 1.65;
}

/* ---------------------------------------------------------------------------
 * About
 * ------------------------------------------------------------------------- */

.about {
	position: relative;
	overflow: hidden;
	margin-top: clamp(12px, 2 * var(--vh), 30px);
	padding: 110px 24px;
	color: #fff;
}

.about__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	opacity: .32;
	filter: saturate(.75) brightness(1.15);
}

.about__shade {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(10, 10, 15, .42) 0%, rgba(10, 10, 15, .18) 45%, rgba(10, 10, 15, .48) 100%);
}

.about__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: start;
	gap: 56px;
	max-width: var(--container);
	margin: 0 auto;
}

.about__title {
	margin: 0 0 32px;
	color: #fff;
	font-size: clamp(30px, 3.6 * var(--vw), 44px);
	font-weight: 700;
	line-height: normal;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.about__goals {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.about__goal {
	padding: 26px 18px;
	border-radius: 10px;
	background: var(--brand-grad);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.about__text {
	padding-top: clamp(62px, 7 * var(--vw), 90px);
}

.about__text p {
	margin: 0 0 18px;
	color: rgba(255, 255, 255, .82);
	font-size: 16px;
	line-height: 1.7;
	text-wrap: pretty;
}

/* Link to /o-nas/: outline counterpart of the white "Kontakt" button in the navigation. */
.about__more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	padding: 12px 24px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 70%, transparent);
	border-radius: 999px;
	color: var(--wp--preset--color--white);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.about__more:hover,
.about__more:focus-visible {
	border-color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--white);
	color: var(--brand-maroon);
}

.about__more svg {
	transition: transform .25s ease;
}

.about__more:hover svg {
	transform: translateX(4px);
}

/* Wide screens: the title and the goal tiles stay in view while the section scrolls (and so does the text
   on the right); the tiles appear one by one under each other, driven by main.js. The extra height of the
   column is the scroll distance for that. (overflow: clip instead of hidden, which would break position: sticky.) */
@media (min-width: 800px) {
	.about {
		overflow: clip;
	}

	/* The spacer is real content (not padding): sticky elements only travel inside the content box of their parent. */
	.about__col::after {
		content: "";
		display: block;
		height: calc(100 * var(--vh));
	}

	/* Title and tiles are one block, so they stay together while it sticks and when it lets go. */
	.about__stick {
		position: sticky;
		top: 110px;
	}

	.about__goal {
		width: 70%;
		padding: 36px 26px;
		font-size: 16px;
		border-top: 1px solid rgba(255, 255, 255, .28);
	}

	/* The vertical position of the text is set in main.js (centred on the tiles); this is the fallback. */
	.about__text {
		position: sticky;
		top: 140px;
		padding-top: 0;
	}
}

/* The title and the text rise into place as soon as the section shows up (main.js adds .is-in). */
.about.is-scroll-reveal .about__title,
.about.is-scroll-reveal .about__text {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}

.about.is-scroll-reveal .about__text {
	transition-delay: .12s;
}

.about.is-scroll-reveal .about__more {
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
	transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1), background .25s ease, border-color .25s ease, color .25s ease;
}

.about.is-scroll-reveal .about__more.is-shown {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.about.is-scroll-reveal.is-in .about__title,
.about.is-scroll-reveal.is-in .about__text {
	opacity: 1;
	transform: none;
}

@media (max-width: 799px) {
	.about__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.about__text {
		padding-top: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Editions + totals
 * ------------------------------------------------------------------------- */

.editions {
	position: relative;
	overflow: hidden;
	padding: 0 0 79px;
	color: #fff;
}

.editions__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.editions__stage {
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding: 220px 24px 64px;
	background: var(--ink);
}

.editions__photo {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: calc(110px + 480px + 30px);
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0, 0, 0, .5) 82%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0, 0, 0, .5) 82%, transparent 100%);
}

.editions__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 55% 35%;
	opacity: 0;
	filter: saturate(.85);
	transition: opacity .8s ease;
}
.editions__photo img.is-active {
	opacity: .48;
}
@media (prefers-reduced-motion: reduce) {
	.editions__photo img { transition: none; }
}

.editions__photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(10, 10, 15, .75) 0%, rgba(10, 10, 15, .55) 40%, rgba(10, 10, 15, 0) 80%);
	opacity: 0;
	transition: opacity .8s ease;
}
.editions__photo.is-dark-left::before {
	opacity: 1;
}

.editions__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10, 10, 15, .94) 0%, rgba(10, 10, 15, .78) 34%, rgba(10, 10, 15, .35) 70%, rgba(10, 10, 15, .55) 100%);
}

.editions__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 30%;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(0deg, #000 0%, #000 12%, rgba(0, 0, 0, .86) 24%, rgba(0, 0, 0, .68) 36%, rgba(0, 0, 0, .5) 48%, rgba(0, 0, 0, .33) 60%, rgba(0, 0, 0, .19) 72%, rgba(0, 0, 0, .08) 85%, transparent 100%);
	mask-image: linear-gradient(0deg, #000 0%, #000 12%, rgba(0, 0, 0, .86) 24%, rgba(0, 0, 0, .68) 36%, rgba(0, 0, 0, .5) 48%, rgba(0, 0, 0, .33) 60%, rgba(0, 0, 0, .19) 72%, rgba(0, 0, 0, .08) 85%, transparent 100%);
}

.editions__inner {
	position: relative;
	max-width: var(--container);
	margin: 0 auto;
}

.editions__archive-link {
	position: absolute;
	top: 0;
	right: 0;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--red, #FF0000);
	text-underline-offset: 6px;
	z-index: 3;
}

.editions__archive-link:hover {
	opacity: .85;
}

/* The stage text is pushed down, so lift the link back up to the dark band above the people's heads. */
@media (min-width: 901px) {
	.editions__archive-link { top: -120px; }
}

.edition {
	position: relative;
	min-height: 480px;
}

.edition.is-entering {
	animation: edSwap 1.25s cubic-bezier(.22, .8, .24, 1);
}

.edition__year {
	position: absolute;
	right: -12px;
	bottom: -60px;
	color: rgba(255, 255, 255, .07);
	font-size: clamp(140px, 22 * var(--vw), 320px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.04em;
	pointer-events: none;
	user-select: none;
}

.edition__body {
	position: relative;
	max-width: 560px;
}

.edition__label {
	margin-bottom: 14px;
	color: var(--red);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.edition__city {
	margin: 0;
	font-size: clamp(46px, 6.4 * var(--vw), 84px);
	font-weight: 200;
	line-height: 1;
	letter-spacing: -.02em;
}

.edition__theme {
	margin-top: 22px;
	font-size: clamp(20px, 2 * var(--vw), 26px);
	font-weight: 400;
}

.edition__desc {
	margin: 14px 0 0;
	color: rgba(255, 255, 255, .82);
	font-size: 15px;
	line-height: 1.65;
	text-wrap: pretty;
}

.edition__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 44px clamp(24px, 7 * var(--vw), 44px); /* narrower columns on phones keep the three stats in one row */
	margin-top: 30px;
}

.edition__stat {
	font-size: 34px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.02em;
}

.edition__stat-label {
	margin-top: 8px;
	color: var(--white-70);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.edition__link {
	display: inline-block;
	margin-top: 30px;
	padding-bottom: 4px;
	border-bottom: 1.5px solid var(--crimson);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
}

.edition__link:hover {
	color: #fff;
}

.editions__scroller {
	overflow-x: auto;
	margin: 64px -24px 0;
	padding: 0 24px 6px;
}

/* --i: index of the selected edition; --dist: how many editions the last change jumped
   (both set by main.js). A longer jump flows a little longer, so the speed stays even. */
.timeline {
	--flow: calc(.45s + var(--dist, 1) * .18s);
	--flow-ease: cubic-bezier(.65, 0, .35, 1);

	/* Soft edge of the coloured window; none on the outer ends, so the first and last city are coloured to the very tip. */
	--fade-l: calc(min(var(--i, 0), 1) * 2.5%);
	--fade-r: calc(min(4 - var(--i, 0), 1) * 2.5%);

	position: relative;
	min-width: 860px;
}

/* One continuous skyline over the five tabs (25:1, so every city sits above its year and
   keeps its proportions). The picture is a mask: grey for every city, the brand gradient
   for the selected one. Built from design/editions/skylines.svg. */
.timeline__skyline {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	aspect-ratio: 25 / 1;
	pointer-events: none;
}

.timeline__skyline-base,
.timeline__skyline-active {
	position: absolute;
	inset: 0;
	-webkit-mask: url("../images/editions/skylines.webp") 0 0 / 100% 100% no-repeat;
	mask: url("../images/editions/skylines.webp") 0 0 / 100% 100% no-repeat;
}

.timeline__skyline-base {
	background: color-mix(in srgb, var(--wp--preset--color--white) 42%, transparent);
}

/* The coloured window: one fifth wide, soft at the edges (they fall in the gaps between
   cities), carrying the whole brand gradient as it slides to the selected city. */
.timeline__window,
.timeline__bar {
	position: absolute;
	left: 0;
	width: 20%;
	/* The brand gradient, with the dull pink and deep pink ends pulled towards the brand red so they stay vivid on the dark background. */
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--wp--preset--color--brand-pink) 60%, var(--wp--preset--color--brand-red)) 0%,
		var(--wp--preset--color--brand-crimson) 33%,
		var(--wp--preset--color--brand-red) 66%,
		color-mix(in srgb, var(--wp--preset--color--brand-deep) 60%, var(--wp--preset--color--brand-red)) 100%
	);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
	transform: translateX(calc(var(--i) * 100%));
	transition: transform var(--flow) var(--flow-ease);
}

.timeline__window {
	top: 0;
	bottom: 0;
}

/* The selected part of the line under the skyline. */
.timeline__bar {
	top: calc(100% + 8px);
	height: 2px;
}

/* Room for the skyline at the top of each tab: a fifth of the strip, so also 5:1. */
.timeline__sky-space {
	display: block;
	aspect-ratio: 5 / 1;
}

.timeline__tabs {
	display: grid;
	grid-template-columns: repeat(5, minmax(160px, 1fr));
	min-width: 860px;
}

.timeline__tab {
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	text-align: center;
	opacity: .6;
	cursor: pointer;
	transition: opacity .3s ease;
}

.timeline__tab:hover,
.timeline__tab.is-active {
	opacity: 1;
}

.timeline__line {
	display: block;
	height: 1px;
	margin: 8px 0 18px;
	background: var(--white-30);
}

.timeline__year {
	display: block;
	padding: 0 10px;
	font-size: 24px;
	font-weight: 300;
	letter-spacing: -.02em;
}

.timeline__sub {
	display: block;
	margin-top: 4px;
	color: rgba(255, 255, 255, .8);
	font-size: 13px;
}

.editions__arrows {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 28px;
}

.stats {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 24px 12px;
	max-width: var(--container);
	margin: 0 auto;
	padding: 91px 24px 43px;
}

/* A quiet heading over the row: small capitals between two short white lines (the row sits on the brand gradient). */
.stats__title {
	display: flex;
	grid-column: 1 / -1;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 0 0 4px;
	color: color-mix(in srgb, var(--wp--preset--color--white) 72%, transparent);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .22em;
	text-align: center;
	text-transform: uppercase;
}

.stats__title::before,
.stats__title::after {
	content: "";
	flex-shrink: 0;
	width: 32px;
	height: 1px;
	background: color-mix(in srgb, var(--wp--preset--color--white) 45%, transparent);
}

.stats__item {
	padding: 24px 12px;
	text-align: center;
}

.stats__num {
	color: #fff;
	font-size: clamp(48px, 3.4 * var(--vw), 66px);
	font-weight: 200;
	line-height: 1;
	letter-spacing: .08em;
	white-space: nowrap;
}

.stats__label {
	max-width: 22ch;
	margin: 14px auto 0;
	color: rgba(255, 255, 255, .6);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* Narrower screens: two per row, the last (longest label) across the whole row. */
@media (max-width: 1023px) {
	.stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.stats__item:last-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 699px) {
	.stats {
		gap: 4px;
	}

	.stats__item {
		padding: 7px 12px;
	}

	.stats__num {
		font-size: 40px;
	}

	.stats__label {
		margin-top: 6px;
		font-size: 10px;
	}

	.stats__title {
		gap: 12px;
		margin-bottom: 8px;
		font-size: 11px;
		letter-spacing: .18em;
	}

	.stats__title::before,
	.stats__title::after {
		width: 20px;
	}
}

/* ---------------------------------------------------------------------------
 * Speakers
 * ------------------------------------------------------------------------- */

.speakers {
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding: 110px 24px 230px;
	background: var(--ink);
	color: #fff;
}

.speakers__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0, 0, 0, .92) 52%, rgba(0, 0, 0, .78) 60%, rgba(0, 0, 0, .6) 68%, rgba(0, 0, 0, .42) 76%, rgba(0, 0, 0, .26) 83%, rgba(0, 0, 0, .14) 89%, rgba(0, 0, 0, .06) 95%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0, 0, 0, .92) 52%, rgba(0, 0, 0, .78) 60%, rgba(0, 0, 0, .6) 68%, rgba(0, 0, 0, .42) 76%, rgba(0, 0, 0, .26) 83%, rgba(0, 0, 0, .14) 89%, rgba(0, 0, 0, .06) 95%, transparent 100%);
}

.speakers__inner {
	position: relative;
	z-index: 1;
	max-width: var(--container);
	margin: 0 auto;
	text-align: center;
}

.speakers__title {
	display: inline-block;
	/* Nudged up by 22px; the same amount is added below, so the photos stay where they are. */
	margin: -22px 0 calc(clamp(32px, 4 * var(--vh), 52px) + 22px);
	padding-bottom: .08em;
	color: #fff;
	font-size: clamp(30px, 4 * var(--vw), 48px);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -.03em;
}

.speakers__viewport {
	overflow: hidden;
	/* Across the whole page: it cancels the side padding of .speakers, so no photo is cut off by the content column. */
	margin: 0 -24px;
}

.speakers__track {
	display: flex;
	gap: 18px;
	width: max-content;
	/* 5 s per person (--speakers is set in the template), so the speed stays the same whatever the count. */
	animation: speakerFlowR calc(var(--speakers, 6) * 5s) linear infinite;
}

/* Hovering stops the ribbon, so a name can be read. */
@media (hover: hover) {
	.speakers__viewport:hover .speakers__track {
		animation-play-state: paused;
	}
}

.speaker {
	flex: 0 0 260px;
}

.speaker__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 16px;
	background: color-mix(in srgb, var(--wp--preset--color--white) 16%, transparent);
}

.speaker__name {
	margin-top: 12px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
}

/* ---------------------------------------------------------------------------
 * Partners
 * ------------------------------------------------------------------------- */

.partners {
	position: relative;
	z-index: 1;
	padding: 110px 24px;
	background: var(--ink);
	color: #fff;
}

.partners__inner {
	max-width: var(--container);
	margin: 0 auto;
}

.partners__title {
	margin: 0 0 20px;
	font-size: clamp(30px, 4 * var(--vw), 48px);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -.03em;
}

.partners__tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 44px 0 28px;
}

.partners__tab {
	flex: 0 0 auto;
	padding: 15px 32px;
	border: 0;
	border-radius: 22px;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

.partners__tab.is-active {
	background: var(--grad);
}

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

.partners__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150px;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 12px;
	background: #fff;
	color: rgba(255, 255, 255, .55);
	font-size: 10px;
	padding: 20px;
	overflow: hidden;
}

.partners__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.partners-page {
	position: relative;
	color: #fff;
	background: var(--brand-grad, linear-gradient(135deg, #B40056 0%, #D40039 45%, #FF0000 75%, #9B004A 100%));
	min-height: calc(100 * var(--vh));
}

.partners-page__hero {
	padding: 180px 24px 60px;
	max-width: 1320px;
	margin: 0 auto;
}

.partners-page__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255,255,255,.85);
	font-size: 14px;
	text-decoration: none;
	margin-bottom: 32px;
	transition: opacity .2s ease;
}
.partners-page__back:hover { opacity: .7; color: #fff; }

.partners-page__title {
	font-size: clamp(35px, 5.6 * var(--vw), 77px);
	font-weight: 300;
	letter-spacing: -.03em;
	line-height: 1.02;
	margin: 0;
}

.partners-page__lede {
	margin: 24px 0 0;
	font-size: clamp(16px, 1.8 * var(--vw), 20px);
	max-width: 720px;
	color: rgba(255,255,255,.88);
}

.partners-page__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 40px 24px 120px;
}

.partners-page__tier {
	padding-top: 70px;
}

.partners-page__tier-title {
	margin: 0 0 32px;
	font-size: clamp(26px, 3 * var(--vw), 40px);
	font-weight: 300;
	letter-spacing: -.02em;
}

.partners-page__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 180px);
	gap: 16px;
	justify-content: start;
}

.partners-page__logo {
	width: 180px;
	height: 180px;
	background: #fff;
	border-radius: 24px;
	border: 1px solid rgba(255,255,255,.28);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	overflow: hidden;
}

.partners-page__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.partners-page__logo.detail-reveal {
	transform: translateY(18px) scale(.96);
	transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}
.partners-page__logo.detail-reveal.is-visible {
	transform: none;
}
.partners-page__tier-title.detail-reveal {
	transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 640px) {
	.partners-page__hero { padding: 140px 20px 40px; }
	.partners-page__grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
	.partners-page__logo { width: auto; height: 130px; padding: 16px; }
}

@media (max-width: 699px) {
	.partners__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * Team
 * ------------------------------------------------------------------------- */

.team {
	position: relative;
	z-index: 1;
	padding: 110px 24px;
	background: var(--ink);
	color: #fff;
}

.team__inner {
	max-width: var(--container);
	margin: 0 auto;
}

/* Title on the left, the link to the /zespol/ page on the right. */
.team__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 56px;
}

.team__title {
	margin: 0;
	font-size: clamp(28px, 3.4 * var(--vw), 44px);
	font-weight: 300;
	line-height: 1.04;
	letter-spacing: -.035em;
}

.team__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}

.team__tab {
	padding: 10px 20px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	background: transparent;
	color: var(--white-70);
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}

.team__tab.is-active {
	border-color: rgba(255, 255, 255, .5);
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

.team__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 18px;
}

.member {
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 18px;
	background: rgba(255, 255, 255, .04);
	transform-origin: 0% 50%;
}

.member:hover {
	background: rgba(255, 255, 255, .09);
}

.member__photo {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	background: rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .6);
	font-size: 10px;
}

.member__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.member__body {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 10px;
	padding: 16px 16px 18px;
}

.member__name {
	font-size: 15px;
	font-weight: 400;
}

.member__role {
	margin-top: 3px;
	color: var(--white-70);
	font-size: 12px;
}

/* Cards with a description turn over: hover where there is a mouse, a tap on touch screens
   (main.js), the corner button from the keyboard. The card frame stays, its content turns. */
.member--bio {
	position: relative;
	cursor: pointer;
}

.member__card {
	position: relative;
	transform-style: preserve-3d;
	transition: transform .7s var(--ease-out);
}

.member__front,
.member__back {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* The back covers the front exactly: the text on top (a long description scrolls),
   the country along the bottom, next to the round button. */
.member__back {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: 18px 16px 12px;
	border-top: 3px solid transparent;
	background:
		linear-gradient(color-mix(in srgb, var(--ink) 94%, transparent), color-mix(in srgb, var(--ink) 94%, transparent)) padding-box,
		var(--brand-grad) border-box;
	color: var(--wp--preset--color--white);
	transform: rotateY(180deg);
}

.member__back-text {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding-bottom: 10px;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/* Country of study: flag(s) and name, on one line with the round button (30 px). */
.member__country {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
	min-height: 30px;
	padding-right: 40px;
	color: color-mix(in srgb, var(--wp--preset--color--white) 88%, transparent);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
}

.member__flags {
	display: flex;
	flex-shrink: 0;
	gap: 4px;
}

/* A thin light edge, so white bands (Poland, Finland…) do not merge with the dark card. */
.member__flags img {
	display: block;
	width: 21px;
	height: 14px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--white) 25%, transparent);
}

.member__back .member__name {
	font-weight: 700;
}

.member__back .member__role {
	color: color-mix(in srgb, var(--wp--preset--color--white) 85%, transparent);
}

.member__bio {
	margin: 12px 0 0;
	color: color-mix(in srgb, var(--wp--preset--color--white) 88%, transparent);
	font-size: 12.5px;
	line-height: 1.5;
}

.member--bio.is-flipped .member__card {
	transform: rotateY(180deg);
}

@media (hover: hover) {
	.member--bio:hover .member__card {
		transform: rotateY(180deg);
	}
}

/* Round "+" in the corner: says there is more, turns the card from the keyboard, becomes "×". */
.member__toggle {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 55%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, var(--ink) 35%, transparent);
	color: var(--wp--preset--color--white);
	cursor: pointer;
	transition: transform .3s ease, background .2s ease;
}

.member__toggle::before,
.member__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1.5px;
	background: currentColor;
	transform: translate(-50%, -50%);
}

.member__toggle::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.member--bio.is-flipped .member__toggle {
	transform: rotate(45deg);
}

@media (hover: hover) {
	.member--bio:hover .member__toggle {
		transform: rotate(45deg);
	}
}

.member__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 3px;
}

.visually-hidden {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Reduced motion: no turning, the description fades in over the photo. */
@media (prefers-reduced-motion: reduce) {
	.member__card,
	.member--bio.is-flipped .member__card,
	.member--bio:hover .member__card {
		transform: none;
		transition: none;
	}

	.member__back {
		opacity: 0;
		transform: none;
		transition: opacity .2s linear;
	}

	.member--bio.is-flipped .member__back,
	.member--bio:hover .member__back {
		opacity: 1;
	}
}

.member__linkedin {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 7px;
}

.member__linkedin:hover {
	background: #fff;
	color: var(--wine);
}

/* ---------------------------------------------------------------------------
 * Testimonials
 * ------------------------------------------------------------------------- */

.quotes {
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding: 120px 24px;
	background: var(--ink);
	color: #fff;
}

.quotes__inner {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.quotes__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 0 0 36px;
	color: color-mix(in srgb, var(--wp--preset--color--white) 72%, transparent);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.quotes__eyebrow::before,
.quotes__eyebrow::after {
	content: "";
	width: 32px;
	height: 2px;
	border-radius: 2px;
	background: var(--brand-grad);
}

/* The opening quote mark in the brand gradient. */
.quotes__mark {
	width: fit-content;
	margin: 0 auto 6px;
	background: var(--brand-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: 72px;
	font-weight: 700;
	line-height: .8;
}

.quotes__slides {
	display: grid;
}

/* All quotes share one grid cell, so the section is as tall as the longest one;
   shorter quotes sit in its middle, so the buttons below never move. */
.quote {
	grid-area: 1 / 1;
	align-self: center;
	margin: 0;
	opacity: 0;
	transition: opacity .5s ease;
}

.quote.is-active {
	opacity: 1;
}

.quote__text {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: clamp(18px, 1.9 * var(--vw), 25px);
	font-style: italic;
	font-weight: 300;
	line-height: 1.5;
	text-wrap: pretty;
}

.quote__by {
	margin-top: 30px;
}

.quote__who {
	color: var(--wp--preset--color--white);
	font-size: 16px;
	font-weight: 700;
}

.quote__role {
	margin-top: 6px;
	color: color-mix(in srgb, var(--wp--preset--color--white) 70%, transparent);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .02em;
}

.quotes__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 48px;
}

.quotes__dots {
	display: flex;
	align-items: center;
	gap: 9px;
}

.quotes__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--white-30);
	cursor: pointer;
}

.quotes__dot.is-active {
	background: var(--wp--preset--color--white);
}

/* ---------------------------------------------------------------------------
 * Instagram
 * ------------------------------------------------------------------------- */

.insta {
	position: relative;
	z-index: 1;
	padding: 96px 24px;
	background: var(--ink);
	color: #fff;
}

.insta__inner {
	max-width: var(--container);
	margin: 0 auto;
}

.insta__head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 28px;
}

.insta__title {
	margin: 0;
	font-size: clamp(24px, 3 * var(--vw), 38px);
	font-weight: 300;
	line-height: 1.06;
	letter-spacing: -.03em;
}

.insta__handle {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-size: 13px;
	font-weight: 400;
}

.insta__handle:hover {
	color: #fff;
}

.insta__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 8px;
}

.insta-post {
	position: relative;
	display: block;
	aspect-ratio: 9 / 14;
	overflow: hidden;
	border-radius: 22px;
	color: #fff;
	transition: transform .35s var(--ease-out);
}

.insta-post:hover {
	color: #fff;
	transform: translateY(-6px);
}

.insta-post__frame {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	padding: 18px 6px;
}

.insta-post__card {
	overflow: hidden;
	border-radius: 14px;
	background: #fff;
	color: var(--ink);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.insta-post__top {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 12px;
}

.insta-post__avatar {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(135deg, #8E0B4A, #FF0A0A);
	object-fit: cover; /* The profile picture, once the feed has one. */
}

.insta-post__user {
	font-size: 12px;
	font-weight: 600;
}

/* Square, centred crop like the profile grid on Instagram (placeholders set their own). */
.insta-post__card > img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Three lines at most, and always room for three so the cards stay the same height.
   No bottom padding: the clipped fourth line would show through it. */
.insta-post__caption {
	display: -webkit-box;
	min-height: calc(4.35em + 10px); /* 3 lines + top padding (border-box) */
	margin: 0 0 12px;
	padding: 10px 12px 0;
	overflow: hidden;
	font-size: 12px;
	line-height: 1.45;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.insta-post__caption strong {
	font-weight: 600;
}

.insta-post__time {
	margin-top: 12px;
	color: rgba(255, 255, 255, .8);
	font-size: 11px;
	text-align: center;
}

/* ---------------------------------------------------------------------------
 * Contact
 * ------------------------------------------------------------------------- */

.contact {
	position: relative;
	z-index: 1;
	padding: 110px 24px;
	background: var(--ink);
}

/* The heading spans the full width; below it the people on the left and the
   form on the right. */
.contact__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 64px;
	max-width: var(--container);
	margin: 0 auto;
}

.contact__head {
	grid-column: 1 / -1;
}

.contact__info,
.contact__form {
	display: flex;
	flex-direction: column;
}

@media (max-width: 767px) {
	.contact__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
	}

	.contact__form {
		margin-top: 20px;
	}
}

.contact__eyebrow {
	margin: 0 0 14px;
	color: rgba(255, 255, 255, .72);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.contact__title {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: clamp(28px, 3.4 * var(--vw), 44px);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -.03em;
}

/* People to contact: the photo card from the MVP at a smaller scale, so all of them
   fit beside the form as one list (square rounded photo, name, department, e-mail). */
.contact-people {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	max-width: 560px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-person {
	display: flex;
	align-items: center;
	gap: 18px;
}

.contact-person__photo {
	display: block;
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 18%, transparent);
	border-radius: 12px;
	background: color-mix(in srgb, var(--wp--preset--color--white) 8%, transparent);
	object-fit: cover;
}

.contact-person__body {
	min-width: 0;
}

/* Name with a small LinkedIn link beside it. */
.contact-person__head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.contact-person__linkedin {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 24px;
	height: 24px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 35%, transparent);
	border-radius: 6px;
	color: var(--wp--preset--color--white);
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.contact-person__linkedin:hover,
.contact-person__linkedin:focus-visible {
	border-color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--white);
	color: var(--brand-maroon);
}

.contact-person__linkedin:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}

.contact-person__name {
	color: var(--wp--preset--color--white);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
}

.contact-person__role {
	margin-top: 4px;
	color: color-mix(in srgb, var(--wp--preset--color--white) 65%, transparent);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* Underlined line by line, so an address wrapped before the @ still reads as one link. */
.contact-person__mail,
.contact-person__mail:hover {
	display: inline-block;
	margin-top: 6px;
	color: var(--wp--preset--color--white);
	font-size: 14px;
	line-height: 1.45;
	overflow-wrap: break-word;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--white) 40%, transparent);
	text-underline-offset: 4px;
}

.contact-person__mail:hover {
	text-decoration-color: var(--wp--preset--color--white);
}

.contact-person__mail:focus-visible {
	border-radius: 2px;
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.contact-person {
		gap: 14px;
	}

	.contact-person__name {
		font-size: 16px;
	}
}

.contact-sent {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	height: 100%;
	padding: 40px;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 20px;
	background: rgba(0, 0, 0, .2);
	animation: riseIn .5s ease both;
}

.contact-sent__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ink);
	color: var(--wine);
	font-size: 20px;
	font-weight: 300;
}

.contact-sent__title {
	font-size: 22px;
	font-weight: 300;
	letter-spacing: -.02em;
}

.contact-sent__text {
	margin: 0;
	color: rgba(255, 255, 255, .82);
	font-size: 14px;
	line-height: 1.7;
}

.contact-sent__again {
	align-self: start;
	margin-top: 8px;
	padding: 11px 20px;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-size: 13px;
	font-weight: 400;
	cursor: pointer;
}

.contact-sent__again:hover {
	background: #fff;
	color: var(--wine);
}

/* Fills the column; the message box takes whatever height is left. */
.contact-form {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 18px;
	padding: 32px;
	border: 2px solid transparent;
	border-radius: 20px;
	background-image: linear-gradient(var(--ink-soft), var(--ink-soft)), linear-gradient(120deg, #8E0B4A 0%, #B4093C 22%, #E3081F 48%, #FF0A0A 62%, #9C0A44 100%);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}

.contact-form__intro {
	padding-bottom: 18px;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 14%, transparent);
}

.contact-form__title {
	margin: 0;
	color: var(--wp--preset--color--white);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.01em;
}


.contact-form__group {
	display: grid;
	gap: 8px;
}

.contact-form__legend {
	color: var(--white-70);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.contact-form__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Category pills. The radio itself is hidden but stays focusable; the pill (its span)
   shows the state: a small ring that fills, and the chosen one turns white with
   maroon text, like the language switch chip in the navigation. */
.contact-form__pill {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.contact-form__pill input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.contact-form__pill span {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 16px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 35%, transparent);
	border-radius: 999px;
	color: var(--wp--preset--color--white);
	font-size: 13px;
	font-weight: 500;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.contact-form__pill span::before {
	content: "";
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	transition: background .2s ease, border-color .2s ease;
}

.contact-form__pill:hover span {
	border-color: color-mix(in srgb, var(--wp--preset--color--white) 70%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent);
}

.contact-form__pill input:checked + span {
	border-color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--white);
	color: var(--brand-maroon);
	font-weight: 700;
}

.contact-form__pill input:checked + span::before {
	border-color: transparent;
	background: var(--brand-grad);
}

.contact-form__pill input:focus-visible + span {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 3px;
}

.contact-form__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
}

.contact-form__field {
	display: grid;
	gap: 7px;
}

.contact-form__field > span {
	color: rgba(255, 255, 255, .75);
	font-size: 12px;
}

.contact-form__field input,
.contact-form__field textarea {
	padding: 13px 14px;
	border: 1px solid var(--white-30);
	border-radius: 10px;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: 14px;
}

.contact-form__field textarea {
	resize: vertical;
}

.contact-form__field--grow {
	flex: 1;
	grid-template-rows: auto minmax(0, 1fr);
}

.contact-form__field--grow textarea {
	height: 100%;
	min-height: 100px;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
	outline: none;
	border-color: #fff;
}

.contact-form__consent {
	display: flex;
	align-items: start;
	gap: 10px;
	color: var(--white-70);
	font-size: 12px;
	line-height: 1.6;
}

.contact-form__consent input {
	margin: 2px 0 0;
	accent-color: #fff;
}

.contact-form__submit {
	padding: 15px;
	border: 0;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
}

/* Hidden from people and screen readers: only bots fill it in. */
.contact-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form__message {
	margin: 0;
	padding: 10px 14px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-red) 45%, transparent);
	border-radius: 10px;
	background: color-mix(in srgb, var(--wp--preset--color--brand-red) 16%, transparent);
	color: var(--wp--preset--color--white);
	font-size: 13px;
	line-height: 1.5;
}

.contact-form.is-busy .contact-form__submit {
	opacity: .7;
	cursor: progress;
}

.contact-form__submit:hover {
	background: #fff;
	color: var(--wine);
}

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------- */

.site-footer {
	position: relative;
	z-index: 1;
	padding: 56px 24px 40px;
	background: var(--ink);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 40px;
	max-width: var(--container);
	margin: 0 auto;
}

.site-footer__org,
.site-footer__address {
	margin: 0 0 14px;
	color: rgba(255, 255, 255, .6);
	font-size: 12px;
	line-height: 1.8;
}

.site-footer__address {
	margin: 0;
	color: rgba(255, 255, 255, .45);
}

.site-footer__col {
	display: grid;
	align-content: start;
	gap: 10px;
	color: rgba(255, 255, 255, .65);
	font-size: 13px;
}

/* Documents that are not published yet: plain text with a small "wkrótce" tag. */
.site-footer__soon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: color-mix(in srgb, var(--wp--preset--color--white) 45%, transparent);
}

.site-footer__soon-tag {
	padding: 2px 7px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 25%, transparent);
	border-radius: 999px;
	color: color-mix(in srgb, var(--wp--preset--color--white) 65%, transparent);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.site-footer__label {
	color: rgba(255, 255, 255, .35);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.site-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: #fff;
	transition: color .25s ease;
}

.site-footer__social a:hover {
	color: var(--red);
}

.site-footer__bottom {
	max-width: var(--container);
	margin: 44px auto 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	color: rgba(255, 255, 255, .35);
	font-size: 11px;
}

/* ---------------------------------------------------------------------------
 * Overlays: cursor glow, cookie bar, newsletter
 * ------------------------------------------------------------------------- */

.cursor-glow {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 55;
	width: 180px;
	height: 180px;
	margin: -90px 0 0 -90px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 10, 10, .5) 0%, rgba(227, 8, 31, .34) 22%, rgba(180, 9, 60, .18) 42%, rgba(142, 11, 74, .07) 58%, rgba(142, 11, 74, 0) 72%);
	opacity: 0;
	pointer-events: none;
	transition: opacity .6s ease;
	will-change: transform;
	contain: strict;
}

.cookie-bar {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 95;
	max-width: 460px;
	padding: 22px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 18px;
	background: var(--ink);
	animation: slideUp .4s ease both;
}

.cookie-bar__title {
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 400;
}

.cookie-bar__text {
	margin: 0 0 16px;
	color: rgba(255, 255, 255, .6);
	font-size: 12px;
	line-height: 1.7;
}

.cookie-bar__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cookie-bar__accept,
.cookie-bar__necessary {
	padding: 11px 18px;
	border: 1px solid transparent;
	border-radius: 999px;
	color: #fff;
	font-size: 13px;
	font-weight: 400;
	cursor: pointer;
}

.cookie-bar__accept {
	background: var(--wine);
}

.cookie-bar__necessary {
	border-color: rgba(255, 255, 255, .25);
	background: transparent;
}

.cookie-bar__accept:hover,
.cookie-bar__necessary:hover {
	background: var(--red);
	border-color: var(--red);
}

.nl-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(5, 5, 8, .72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.nl-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 660px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 24px;
	background: var(--ink);
	animation: slideUp .35s ease both;
}

.nl-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: color .25s ease;
}

.nl-modal__close:hover {
	color: var(--red);
}

.nl-modal__band {
	display: flex;
	align-items: end;
	gap: 16px;
	height: 110px;
	padding: 20px 76px 20px 28px;
	background: linear-gradient(115deg, #8E0B4A 0%, #B4093C 20%, #E3081F 46%, #FF0A0A 60%, #D9082A 78%, #9C0A44 100%);
	background-size: 220% 100%;
	animation: navShift 11s ease-in-out infinite;
}

.nl-modal__band-label {
	margin-left: -2px;
	color: #fff;
	font-size: 28px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.01em;
}

.nl-modal__band .logo {
	align-self: end;
}

.nl-modal__sent {
	padding: 34px 28px 32px;
	text-align: center;
}

.nl-modal__sent-title {
	margin-bottom: 10px;
	font-size: 22px;
	font-weight: 300;
	letter-spacing: -.02em;
}

.nl-modal__sent-text {
	margin: 0 0 20px;
	color: var(--white-70);
	font-size: 14px;
}

.nl-modal__sent-close {
	padding: 12px 22px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-size: 13px;
	font-weight: 400;
	cursor: pointer;
}

.nl-modal__sent-close:hover {
	background: var(--red);
	border-color: var(--red);
}

.nl-modal__body {
	padding: 28px;
}

.nl-modal__title {
	margin: 0 0 6px;
	color: #fff;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -.025em;
}

.nl-modal__lead {
	margin: 0 0 22px;
	color: rgba(255, 255, 255, .8);
	font-size: 16px;
	font-weight: 300;
}

.nl-form {
	display: grid;
	gap: 12px;
}

.nl-form__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
}

.nl-form input {
	padding: 14px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 10px;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	font-size: 14px;
}

.nl-form input:focus {
	outline: none;
	border-color: var(--signal);
}

/* Bot trap: off screen, never shown to people. */
.nl-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nl-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: color-mix(in srgb, var(--wp--preset--color--white) 78%, transparent);
	font-size: 12.5px;
	line-height: 1.55;
	cursor: pointer;
}

.nl-form .nl-form__consent input {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	padding: 0;
	border: 0;
	accent-color: var(--wp--preset--color--brand-crimson);
}

.nl-form__info {
	margin: 0;
	color: color-mix(in srgb, var(--wp--preset--color--white) 58%, transparent);
	font-size: 11.5px;
	line-height: 1.55;
}

.nl-form__info a {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.nl-form__message {
	margin: 0;
	padding: 10px 14px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-red) 45%, transparent);
	border-radius: 10px;
	background: color-mix(in srgb, var(--wp--preset--color--brand-red) 16%, transparent);
	color: var(--wp--preset--color--white);
	font-size: 13px;
	line-height: 1.5;
}

.nl-form.is-busy .nl-form__submit {
	opacity: .7;
	cursor: progress;
}

.nl-form__submit {
	padding: 15px;
	border: 0;
	border-radius: 999px;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * Scroll reveals (classes set by main.js; without JS everything stays visible)
 * ------------------------------------------------------------------------- */

.js [data-reveal]:not([data-reveal="clip"]):not(.is-revealed) {
	opacity: 0;
}

.js [data-reveal="clip"].is-revealing > :first-child {
	animation: clipUp 2s cubic-bezier(.25, .8, .25, 1) var(--delay, 0s) backwards;
}

.js [data-reveal="logo"].is-revealing {
	animation: logoIn 1s var(--ease-out) var(--delay, 0s) forwards;
}

.js [data-reveal="flip"].is-revealing {
	animation: teamFlip 1.1s var(--ease-out) var(--delay, 0s) forwards;
}

.js [data-reveal="pop2"].is-revealing {
	animation: gridPop .8s var(--ease-out) var(--delay, 0s) forwards;
}

/* ---------------------------------------------------------------------------
 * Section spacing on tablets and phones (the MVP scaled paddings to 60%)
 * ------------------------------------------------------------------------- */

@media (max-width: 1119px) {
	.news { padding: 51px 18px; }
	.about { padding: 66px 18px; }
	.editions { padding: 0 0 48px; }
	.speakers { padding: 66px 18px 138px; }
	.speakers__viewport { margin: 0 -18px; }
	.partners,
	.team,
	.contact { padding: 66px 18px; }
	.quotes { padding: 72px 18px; }
	.insta { padding: 58px 18px; }
}

/* ---------------------------------------------------------------------------
 * Keyframes
 * ------------------------------------------------------------------------- */

@keyframes riseIn {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

@keyframes slideUp {
	from { opacity: 0; transform: translateY(40px); }
	to { opacity: 1; transform: none; }
}

/* One copy of a hero column (--count photos and their gaps) per loop; the copies repeat seamlessly. */
@keyframes heroSlide {
	to { transform: translateY(calc(var(--count) * (var(--card) + var(--gap)) * -1)); }
}

@keyframes skyReveal {
	to { clip-path: inset(-2px 0 -2px 0); }
}

@keyframes navShift {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes edSwap {
	from { opacity: 0; transform: translateX(70px); }
	to { opacity: 1; transform: none; }
}

/* Right to left: the ribbon holds --copies identical copies, so shifting by exactly one copy (a copy is
   (width + one gap) / copies wide) loops without a seam, and the copies still ahead always fill the screen. */
@keyframes speakerFlowR {
	from { transform: translateX(0); }
	to { transform: translateX(calc((-100% - 18px) / var(--copies, 2))); }
}

@keyframes clipUp {
	0% { transform: translateY(5mm); }
	100% { transform: translateY(0); }
}

@keyframes logoIn {
	from { opacity: 0; transform: translateX(80px); }
	to { opacity: 1; transform: none; }
}

@keyframes teamFlip {
	0% { opacity: 0; transform: perspective(800px) rotateY(-65deg) translateZ(-40px); }
	60% { opacity: 1; transform: perspective(800px) rotateY(8deg) translateZ(0); }
	100% { opacity: 1; transform: none; }
}

@keyframes gridPop {
	0% { opacity: 0; transform: scale(.72) rotate(-4deg); }
	65% { opacity: 1; transform: scale(1.06) rotate(1.5deg); }
	100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.speakers__track {
		animation: none !important;
	}

	/* Without the moving ribbon every speaker is reached by scrolling the row; the seamless-loop copy is not needed. */
	.speakers__viewport {
		overflow-x: auto;
	}

	.speaker[aria-hidden="true"] {
		display: none;
	}
}

/* ─── Archive page ─────────────────────────────────────────────────── */

.archive {
	position: relative;
	color: #fff;
	min-height: calc(100 * var(--vh));
}

.archive__bg {
	position: fixed;
	inset: 0;
	z-index: -1;
	background: linear-gradient(115deg, #8E0B4A 0%, #C60A2E 26%, #FF0A0A 52%, #E00C2A 74%, #B00B3F 100%);
}

.archive__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: clamp(150px, 18 * var(--vh), 200px) 24px 120px;
	animation: viewIn .5s ease both;
}

@keyframes viewIn {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

.archive__kicker {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255,255,255,.85);
	margin: 0 0 18px;
}

.archive__title {
	margin: 0;
	font-size: clamp(40px, 6 * var(--vw), 84px);
	font-weight: 200;
	letter-spacing: -.035em;
	line-height: 1;
}

.archive__lede {
	margin: 24px 0 0;
	max-width: 560px;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255,255,255,.9);
}

.archive__rail {
	position: relative;
	margin-top: 80px;
}

.archive__line {
	position: absolute;
	left: clamp(96px, 14 * var(--vw), 180px);
	top: 0;
	bottom: 0;
	/* One screen pixel also under the 90% page scale (a 0.9 px line can vanish at 100% Windows scaling). */
	width: calc(1px / var(--page-zoom));
	background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,.15) 100%);
}

.archive__row {
	position: relative;
	display: grid;
	grid-template-columns: clamp(96px, 14 * var(--vw), 180px) minmax(0, 1fr) auto;
	align-items: center;
	gap: 0;
	text-align: left;
	color: #fff;
	border-bottom: 1px solid rgba(255,255,255,.22);
	padding: 28px 0;
	transition: background .3s ease;
	text-decoration: none;
}

.archive__row:hover {
	background: rgba(10,10,15,.14);
	color: #fff;
}

.archive__year {
	font-size: clamp(26px, 3 * var(--vw), 40px);
	font-weight: 200;
	letter-spacing: -.02em;
	line-height: 1;
	padding-right: 24px;
}

.archive__dot {
	display: inline-block;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #fff;
	margin-left: -6.5px;
	box-shadow: 0 0 0 5px rgba(255,255,255,.22);
	flex-shrink: 0;
}

/* City and edition (or the news title on /aktualnosci/), set off from the dot. */
.archive__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding-left: clamp(18px, 3 * var(--vw), 36px);
}

/* Put dot + meta inline */
.archive__row {
	grid-template-columns: clamp(96px, 14 * var(--vw), 180px) auto 1fr auto;
}

.archive__city {
	font-size: clamp(24px, 3 * var(--vw), 40px);
	font-weight: 300;
	letter-spacing: -.02em;
	line-height: 1.05;
}

.archive__label {
	margin-top: 8px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.78);
}

.archive__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: rgba(255,255,255,.75);
	padding-left: 16px;
	white-space: nowrap;
}

/* ── Detail view ── */

.archive__detail {
	animation: viewIn .5s ease both;
}

.archive-detail__hero {
	position: relative;
	overflow: hidden;
	min-height: calc(78 * var(--vh));
	display: flex;
	align-items: flex-end;
	padding: 180px 24px 72px;
}

.archive-detail__cover {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #4E0214, #B40056, #D40039);
}

.archive-detail__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,10,15,.55) 0%, rgba(10,10,15,.25) 40%, rgba(10,10,15,.92) 100%);
}

.archive-detail__hero-inner {
	position: relative;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
}

.archive-detail__back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-size: 14px;
	margin-bottom: 36px;
	text-decoration: none;
}

.archive-detail__back:hover { opacity: .7; color: #fff; }

.archive-detail__kicker {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255,255,255,.75);
	margin: 0 0 16px;
}

.archive-detail__city {
	margin: 0;
	font-size: clamp(52px, 9 * var(--vw), 136px);
	font-weight: 200;
	letter-spacing: -.04em;
	line-height: .95;
}

.archive-detail__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 40px;
	margin-top: 30px;
	font-size: 16px;
	color: rgba(255,255,255,.85);
}

.archive-detail__facts span {
	display: flex;
	align-items: center;
	gap: 10px;
}

.archive-detail__stats {
	padding: 0 24px;
}

.archive-detail__stats-grid {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px;
	background: rgba(255,255,255,.22);
	border-radius: 24px;
	overflow: hidden;
}

.archive-detail__stats-grid > div {
	background: rgba(10,10,15,.28);
	padding: 34px 28px;
}

.archive-detail__stat {
	font-size: clamp(40px, 4.4 * var(--vw), 60px);
	font-weight: 200;
	letter-spacing: -.03em;
	line-height: 1;
}

.archive-detail__stat-label {
	margin-top: 12px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.82);
}

.archive-detail__about {
	max-width: 1320px;
	margin: 0 auto;
	padding: 110px 24px 0;
	display: grid;
	gap: 20px;
}

.archive-detail__about h2 {
	margin: 0 0 12px;
	font-size: clamp(28px, 3.4 * var(--vw), 44px);
	font-weight: 300;
	letter-spacing: -.03em;
	line-height: 1.08;
}

.archive-detail__about p {
	margin: 0;
	font-size: 17px;
	line-height: 1.75;
	color: rgba(255,255,255,.88);
}

.archive-detail__nav {
	max-width: 1320px;
	margin: 0 auto;
	padding: 110px 24px 120px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.archive-detail__nav-btn {
	display: block;
	padding: 30px;
	border-radius: 24px;
	border: 1px solid rgba(255,255,255,.4);
	color: #fff;
	text-decoration: none;
	transition: background .25s ease;
}

.archive-detail__nav-btn:hover { background: rgba(10,10,15,.22); color: #fff; }

.archive-detail__nav-btn--right { text-align: right; }

.archive-detail__nav-kicker {
	display: block;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.55);
}

.archive-detail__nav-name {
	display: block;
	margin-top: 12px;
	font-size: clamp(22px, 2.4 * var(--vw), 32px);
	font-weight: 300;
}

.archive-detail__block {
	max-width: 1320px;
	margin: 0 auto;
	padding: 90px 24px 0;
}

.archive-detail__block h2 {
	margin: 0 0 36px;
	font-size: clamp(28px, 3.4 * var(--vw), 44px);
	font-weight: 300;
	letter-spacing: -.03em;
}

.archive-detail__leaders { padding-top: 110px; }

.archive-detail__leaders-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

.archive-detail__leader {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 20px;
	border-radius: 24px;
	background: rgba(10,10,15,.22);
	border: 1px solid rgba(255,255,255,.2);
}

.archive-detail__leader-photo {
	width: 96px;
	height: 96px;
	flex-shrink: 0;
	border-radius: 18px;
	background: rgba(255,255,255,.08);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	color: rgba(255,255,255,.45);
	overflow: hidden;
}

.archive-detail__leader-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 15%;
	display: block;
}

.archive-detail__leader-name { font-size: 18px; font-weight: 500; }
.archive-detail__leader-role { margin-top: 6px; font-size: 13px; color: rgba(255,255,255,.8); }

.archive-detail__team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 18px;
}

.archive-detail__member-photo {
	aspect-ratio: 1;
	border-radius: 20px;
	background: rgba(10,10,15,.22);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	color: rgba(255,255,255,.6);
	overflow: hidden;
}

.archive-detail__member-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 15%;
	display: block;
}

.archive-detail__team-panel { display: none; }
.archive-detail__team-panel.is-active { display: contents; }

.archive-detail__member-name { margin-top: 12px; font-size: 15px; font-weight: 500; }
.archive-detail__member-role { margin-top: 3px; font-size: 12px; color: rgba(255,255,255,.8); }

.archive-detail__logos {
	display: grid;
	grid-template-columns: repeat(auto-fill, 180px);
	column-gap: 16px;
	row-gap: 56px;
	justify-content: start;
}

.archive-detail__logos > [data-partners-group].is-col-strategic { grid-column: 1 / span 1; }
.archive-detail__logos > [data-partners-group].is-col-gold { grid-column: 2 / -1; }
.archive-detail__logos > [data-partners-group].is-col-gold .archive-detail__logo-grid {
	justify-content: end;
}
.archive-detail__logos > [data-partners-group].is-col-strategic > h2,
.archive-detail__logos > [data-partners-group].is-col-gold > h2 {
	min-height: 2.4em;
}
.archive-detail__logos > [data-partners-group].is-full-row { grid-column: 1 / -1; }

@media (max-width: 640px) {
	.archive-detail__logos > [data-partners-group].is-col-strategic,
	.archive-detail__logos > [data-partners-group].is-col-gold,
	.archive-detail__logos > [data-partners-group].is-full-row { grid-column: 1 / -1; }
	.archive-detail__logos > [data-partners-group].is-col-gold .archive-detail__logo-grid { justify-content: start; }
}

.archive-detail__logos h2 { margin-bottom: 28px; font-size: clamp(24px, 2.8 * var(--vw), 36px); }

.archive-detail__logo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, 180px);
	gap: 16px;
	justify-content: start;
}

.archive-detail__logo {
	width: 180px;
	height: 180px;
	border-radius: 24px;
	border: 1px solid rgba(255,255,255,.28);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	color: rgba(255,255,255,.7);
	padding: 28px;
	overflow: hidden;
}

.archive-detail__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.archive-detail__motto {
	margin: 18px 0 0;
	font-size: clamp(18px, 2.2 * var(--vw), 26px);
	font-weight: 300;
	font-style: italic;
	color: rgba(255,255,255,.88);
	letter-spacing: -.01em;
}

.archive-detail__gallery { padding-top: 110px; }

.archive-detail__gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	grid-auto-flow: dense;
	gap: 10px;
}

.archive-detail__thumb {
	aspect-ratio: 1;
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(10,10,15,.4));
}

/* Phones: two fixed columns, so the double-width tiles cannot push the grid past the screen. */
@media (max-width: 599px) {
	.archive-detail__gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Phones: a smaller gap after the dot, and only the arrow on the right, so long
	   city names (Amsterdam) and news titles keep their room. */
	.archive__meta {
		padding-left: 14px;
	}

	.archive__cta > span {
		display: none;
	}
}

/* The narrowest phones: a slightly smaller city name, so Amsterdam or Cambridge never reaches the arrow. */
@media (max-width: 379px) {
	.archive__city {
		font-size: 20px;
	}
}

@keyframes archiveRowIn {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: none; }
}

.archive__rail .archive__row {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .45s cubic-bezier(.22, .8, .24, 1), transform .45s cubic-bezier(.22, .8, .24, 1);
}

.archive__rail .archive__row.is-visible {
	opacity: 1;
	transform: none;
}

.archive__row.is-locked {
	pointer-events: none;
	cursor: default;
}

.detail-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .35s cubic-bezier(.22, .8, .24, 1), transform .35s cubic-bezier(.22, .8, .24, 1);
	will-change: opacity, transform;
}
.archive-detail__leader.detail-reveal,
.archive-detail__member.detail-reveal {
	transition-duration: .28s;
	transform: translateY(10px);
}
.detail-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.detail-reveal { opacity: 1; transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
	.archive__row { animation: none; }
}

.archive__hero {
	position: relative;
	overflow: hidden;
	min-height: calc(78 * var(--vh));
	display: flex;
	align-items: flex-end;
	padding: 180px 24px 72px;
	animation: viewIn .5s ease both;
}

.archive__hero-bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, #4E0214, #B40056, #D40039);
}

/* Texts come up line by line from behind a mask (main.js splits [data-rv] into .rv > .rv__line).
   Until the script has split them they are hidden, so there is no flash of plain text first. */
.js :is(.archive__hero, .archive-detail__hero) [data-rv]:not(.is-rv-ready) {
	visibility: hidden;
}

:is(.archive__hero, .archive-detail__hero) .rv {
	display: block;
	overflow: hidden;
	/* Room for the descenders (g, y, ę, ą), which would otherwise be cut by the mask. */
	padding-bottom: .16em;
	margin-bottom: -.16em;
}

:is(.archive__hero, .archive-detail__hero) .rv__line {
	display: block;
	transform: translateY(115%);
	animation: rvUp 1s cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: calc(.1s + var(--rv-i, 0) * .1s);
}

:is(.archive__hero, .archive-detail__hero).is-rv-done .rv__line {
	animation: none;
	transform: none;
}

/* A panel whose entrance is held (the first edition, until the section is on screen) waits paused. */
.is-rv-wait .rv__line {
	animation-play-state: paused;
}

@keyframes rvUp {
	from { transform: translateY(115%); }
	to { transform: translateY(0); }
}

.archive__hero-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,10,15,.55) 0%, rgba(10,10,15,.25) 40%, rgba(10,10,15,.92) 100%);
}

.archive__hero-inner {
	position: relative;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
}

.archive__inner--body {
	padding-top: 72px;
}

.archive__intro {
	margin: 56px 0 0;
	max-width: 820px;
	display: grid;
	gap: 20px;
}

.archive__intro p {
	margin: 0;
	font-size: 17px;
	line-height: 1.75;
	color: rgba(255,255,255,.88);
}

.archive__back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
	margin-bottom: 32px;
	opacity: .9;
}

.archive__back:hover { opacity: 1; color: #fff; }

/* ─── Team page (/zespol/): the home page team tabs and cards under the archive hero ─── */

.team-page__body .team__tabs {
	margin-bottom: 40px;
}

/* Four cards per row: wide enough for the description on the back of each card. */
.team-page__body .team__grid {
	grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
}

/* ─── News archive (/aktualnosci/): the editions archive layout, rows open in place ─── */

.news-archive__rail {
	position: relative;
}

.news-archive__row {
	cursor: pointer;
	list-style: none;
}

.news-archive__row::-webkit-details-marker {
	display: none;
}

.news-archive__row:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 4px;
}

/* Day and month large, the year small under them, so a date fits the year column. */
.news-archive__date {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.news-archive__year {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .14em;
	color: color-mix(in srgb, var(--wp--preset--color--white) 78%, transparent);
}

.news-archive__less,
.news-archive__entry[open] .news-archive__more {
	display: none;
}

.news-archive__entry[open] .news-archive__less {
	display: inline;
}

.news-archive__row .archive__cta svg {
	transition: transform .3s ease;
}

.news-archive__entry[open] .news-archive__row .archive__cta svg {
	transform: rotate(90deg);
}

/* The opened entry: photo and full text, lined up with the title. */
.news-archive__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	align-items: start;
	gap: clamp(24px, 3 * var(--vw), 48px);
	/* Date column + the half of the dot past the line + the title's own indent. */
	padding: 8px 0 40px calc(clamp(96px, 14 * var(--vw), 180px) + 6.5px + clamp(18px, 3 * var(--vw), 36px));
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 22%, transparent);
}

.news-archive__img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	object-fit: cover;
	object-position: 50% 25%;
}

.news-archive__text {
	margin: 0;
	color: color-mix(in srgb, var(--wp--preset--color--white) 90%, transparent);
	font-size: 15px;
	line-height: 1.7;
}

.news-archive__entry[open] > .news-archive__row {
	border-bottom-color: transparent;
}

@media (max-width: 767px) {
	.news-archive__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.news-archive__text {
		font-size: 14px;
	}
}

/* Phones: the title gets the room, the row keeps only the arrow. */
@media (max-width: 599px) {
	.news-archive__title {
		font-size: 20px;
	}

	.news-archive__body {
		padding-left: calc(clamp(96px, 14 * var(--vw), 180px) + 6.5px + 14px);
	}

	.news-archive__more,
	.news-archive__entry[open] .news-archive__less {
		display: none;
	}
}

.archive-detail__dept-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: -16px 0 32px;
}

.archive-detail__dept-tab {
	appearance: none;
	background: transparent;
	border: 1px solid rgba(255,255,255,.3);
	border-radius: 999px;
	color: #fff;
	font: inherit;
	font-size: 13px;
	letter-spacing: .02em;
	padding: 9px 18px;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.archive-detail__dept-tab:hover {
	background: rgba(255,255,255,.08);
	border-color: rgba(255,255,255,.5);
}

.archive-detail__dept-tab.is-active {
	background: #fff;
	color: #4E0214;
	border-color: #fff;
}

/* ---------------------------------------------------------------------------
 * About page (/o-nas/): intro, the parts of the event, goals, link to the edition.
 * Shares the sub-page language (back link, kicker, thin large title, brand
 * gradient) with /archiwum/ and /aktualnosci/, but reads as an editorial page.
 * ------------------------------------------------------------------------- */

.about-page {
	background: var(--ink);
	color: var(--wp--preset--color--white);
}

.about-page__inner {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
}

/* Intro: text on the left, photo on the right, on the brand gradient fading to ink. */
.about-page__hero {
	position: relative;
	overflow: hidden;
	padding: 180px 24px 96px;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--ink) 55%, transparent) 0%, color-mix(in srgb, var(--ink) 20%, transparent) 40%, color-mix(in srgb, var(--ink) 85%, transparent) 78%, var(--ink) 96%),
		var(--wp--preset--gradient--brand-radial);
}

.about-page__intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5 * var(--vw), 80px);
}

.about-page__back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 32px;
	color: var(--wp--preset--color--white);
	font-size: 14px;
	font-weight: 500;
}

.about-page__back:hover {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.about-page__kicker {
	margin: 0 0 18px;
	color: color-mix(in srgb, var(--wp--preset--color--white) 85%, transparent);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.about-page__title {
	margin: 0;
	font-size: clamp(40px, 6 * var(--vw), 84px);
	font-weight: 200;
	line-height: 1;
	letter-spacing: -.035em;
}

.about-page__lead {
	max-width: 560px;
	margin: 28px 0 0;
	color: color-mix(in srgb, var(--wp--preset--color--white) 90%, transparent);
	font-size: clamp(16px, 1.3 * var(--vw), 18px);
	line-height: 1.7;
}

.about-page__intro-photo {
	margin: 0;
	overflow: hidden;
	border-radius: 28px;
	box-shadow: 0 32px 90px color-mix(in srgb, var(--ink) 55%, transparent);
}

.about-page__intro-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* History: a horizontal timeline on wide screens (dots on one line), vertical on smaller ones.
   The jubilee edition closes it as a card on the brand gradient. */
.about-page__history {
	padding: 40px 24px 100px;
}

.about-history {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 56px 32px;
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
}

/* Two rows of four; the line runs through the dots of each row. */
.about-history__step::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 0;
	right: -32px;
	height: 1px;
	background: color-mix(in srgb, var(--wp--preset--color--white) 45%, transparent);
}

.about-history__step:nth-child(4)::before {
	right: 0;
}

.about-history__step--now::before {
	display: none;
}

/* The jubilee edition takes the last two places of the second row. */
.about-history__step--now {
	grid-column: span 2;
}

.about-history__step {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-top: 34px;
}

.about-history__dot {
	position: absolute;
	top: 0;
	left: 0;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--wp--preset--color--white) 22%, transparent);
}

.about-history__year {
	font-size: clamp(22px, 1.9 * var(--vw), 30px);
	font-weight: 200;
	line-height: 1;
	letter-spacing: -.02em;
}

.about-history__label {
	margin-top: 10px;
	color: color-mix(in srgb, var(--wp--preset--color--white) 85%, transparent);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.about-history__text {
	margin: 12px 0 0;
	color: color-mix(in srgb, var(--wp--preset--color--white) 80%, transparent);
	font-size: 13.5px;
	line-height: 1.6;
}

.about-history__step--now {
	margin-top: -18px;
	padding: 52px 28px 26px;
	border-radius: 22px;
	background: linear-gradient(160deg, var(--brand-grad-stops));
	box-shadow: 0 24px 70px color-mix(in srgb, var(--wp--preset--color--brand-crimson) 30%, transparent);
}

.about-history__step--now .about-history__dot {
	top: 18px;
	left: 20px;
}

.about-history__step--now .about-history__year {
	font-weight: 700;
}

.about-history__now-title {
	margin: 10px 0 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.about-history__step--now .about-history__label,
.about-history__step--now .about-history__text {
	color: var(--wp--preset--color--white);
}

/* Founder: a black-and-white portrait beside his story on the brand gradient. */
.about-page__founder {
	padding: 0 24px 110px;
}

.about-founder {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	overflow: hidden;
	border-radius: 28px;
	background: var(--wp--preset--gradient--brand-radial);
}

.about-founder__photo {
	margin: 0;
}

.about-founder__photo img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: 50% 20%;
}

.about-founder__text {
	align-self: center;
	padding: clamp(32px, 4 * var(--vw), 64px);
}

.about-founder__name {
	margin: 0 0 24px;
	font-size: clamp(30px, 3.4 * var(--vw), 48px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.02em;
}

.about-founder__name span {
	display: block;
	font-weight: 200;
}

.about-founder__text p:not(.about-page__kicker) {
	margin: 0 0 16px;
	font-size: clamp(15px, 1.2 * var(--vw), 17px);
	line-height: 1.7;
}

.about-founder__quote {
	margin: 28px 0 0;
	padding: 18px 24px;
	border-radius: 14px;
	background: var(--wp--preset--color--white);
	color: var(--brand-maroon);
	font-size: clamp(17px, 1.6 * var(--vw), 22px);
	font-weight: 700;
	text-align: center;
}

@media (max-width: 1099px) {
	.about-history {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding-left: 30px;
	}

	/* One vertical line down the left instead of a line per row. */
	.about-history::before {
		content: "";
		position: absolute;
		top: 6px;
		bottom: 0;
		left: 6px;
		width: 1px;
		background: linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--white) 70%, transparent), color-mix(in srgb, var(--wp--preset--color--white) 20%, transparent));
	}

	.about-history__step::before {
		display: none;
	}

	.about-history__step--now {
		grid-column: auto;
	}

	.about-history__step {
		padding-top: 0;
	}

	.about-history__dot {
		left: -30px;
	}

	.about-history__step--now {
		margin-top: 0;
		padding: 22px 20px;
	}

	.about-history__step--now .about-history__dot {
		top: 0;
		left: -30px;
	}
}

@media (max-width: 899px) {
	.about-page__history {
		padding: 24px 18px 72px;
	}

	.about-page__founder {
		padding: 0 18px 72px;
	}

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

	.about-founder__photo img {
		aspect-ratio: 4 / 5;
		height: auto;
	}
}

/* The event: section heading, then two columns of photo cards with text under each. */
.about-page__event {
	padding: 40px 24px 110px;
}

.about-page__heading {
	margin: 0;
	font-size: clamp(30px, 3.6 * var(--vw), 52px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.03em;
}

.about-page__parts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 64px clamp(28px, 4 * var(--vw), 64px);
	margin-top: 48px;
}

.about-part__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	border-radius: 28px;
}

.about-part__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
	transition: transform .8s var(--ease-out);
}

/* Darker towards the middle, so the white label reads on any photo. */
.about-part__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--ink) 52%, transparent);
	transition: background .4s ease;
}

.about-part:hover .about-part__media img {
	transform: scale(1.04);
}

.about-part:hover .about-part__media::after {
	background: color-mix(in srgb, var(--ink) 40%, transparent);
}

.about-part__label {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 24px;
	color: var(--wp--preset--color--white);
	font-size: clamp(18px, 1.8 * var(--vw), 26px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .04em;
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
}

.about-part__text {
	margin-top: 26px;
}

.about-part__text p {
	margin: 0 0 16px;
	color: color-mix(in srgb, var(--wp--preset--color--white) 85%, transparent);
	font-size: 16px;
	line-height: 1.7;
}

.about-part__text strong {
	color: var(--wp--preset--color--white);
	font-weight: 700;
}

/* Goals: centred heading and text, then a ribbon of goals on the brand gradient. */
.about-page__goals {
	padding: 100px 0 0;
	background: var(--ink-soft);
}

.about-page__goals-inner {
	max-width: 820px;
	padding: 0 24px;
	text-align: center;
}

.about-page__goals-text {
	margin: 28px 0 0;
	color: color-mix(in srgb, var(--wp--preset--color--white) 88%, transparent);
	font-size: clamp(16px, 1.3 * var(--vw), 18px);
	line-height: 1.75;
}

.about-page__ribbon {
	overflow: hidden;
	margin-top: 72px;
	background: var(--brand-grad);
}

.about-page__ribbon-track {
	display: flex;
	width: max-content;
	animation: aboutRibbon 36s linear infinite;
}

.about-page__ribbon:hover .about-page__ribbon-track {
	animation-play-state: paused;
}

.about-page__ribbon-list {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-page__ribbon-list li {
	display: flex;
	align-items: center;
	padding: 30px 48px;
	color: var(--wp--preset--color--white);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* A small white dot between goals. */
.about-page__ribbon-list li::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-left: 96px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--white) 70%, transparent);
}

@keyframes aboutRibbon {
	to { transform: translateX(-50%); }
}

/* Reduced motion: no moving ribbon, the goals wrap and the copy is hidden. */
@media (prefers-reduced-motion: reduce) {
	.about-page__ribbon-track {
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
		animation: none;
	}

	.about-page__ribbon-list {
		flex-wrap: wrap;
		justify-content: center;
	}

	.about-page__ribbon-list[aria-hidden="true"] {
		display: none;
	}

	.about-page__ribbon-list li {
		white-space: normal;
		text-align: center;
	}

	.about-page__ribbon-list li::after {
		display: none;
	}

	.about-part:hover .about-part__media img {
		transform: none;
	}
}

/* Team: a short text with a link to the full team, beside the Project Leaders. */
.about-page__team {
	padding: 110px 24px;
}

.about-page__team-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	align-items: center;
	gap: clamp(32px, 5 * var(--vw), 80px);
}

.about-page__team-lead {
	margin: 24px 0 0;
	color: color-mix(in srgb, var(--wp--preset--color--white) 88%, transparent);
	font-size: 16px;
	line-height: 1.75;
}

.about-page__link,
.about-page__link:hover {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 28px;
	padding-bottom: 4px;
	border-bottom: 1.5px solid var(--wp--preset--color--brand-crimson);
	color: var(--wp--preset--color--white);
	font-size: 15px;
	font-weight: 600;
}

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

.about-page__leader img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	border-radius: 20px;
	object-fit: cover;
}

.about-page__leader-name {
	display: block;
	margin-top: 14px;
	font-size: 15px;
	font-weight: 600;
}

.about-page__leader-role {
	display: block;
	margin-top: 4px;
	color: color-mix(in srgb, var(--wp--preset--color--white) 70%, transparent);
	font-size: 12px;
	letter-spacing: .06em;
}

/* Link to the upcoming edition: an outlined white pill. */
.about-page__cta {
	display: flex;
	justify-content: center;
	padding: 96px 24px 120px;
	background: var(--ink-soft);
}

.about-page__button,
.about-page__button:hover {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 18px 34px;
	border: 1.5px solid var(--wp--preset--color--white);
	border-radius: 999px;
	color: var(--wp--preset--color--white);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .04em;
	transition: background .25s ease, color .25s ease;
}

.about-page__button:hover,
.about-page__button:focus-visible {
	background: var(--wp--preset--color--white);
	color: var(--brand-maroon);
}

@media (max-width: 899px) {
	.about-page__hero {
		padding: 140px 18px 64px;
	}

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

	.about-page__event {
		padding: 24px 18px 72px;
	}

	.about-page__parts {
		gap: 48px;
		margin-top: 32px;
	}

	.about-page__goals {
		padding-top: 72px;
	}

	.about-page__goals-inner {
		padding: 0 18px;
	}

	.about-page__ribbon {
		margin-top: 48px;
	}

	.about-page__ribbon-list li {
		padding: 22px 28px;
		font-size: 14px;
	}

	.about-page__ribbon-list li::after {
		margin-left: 56px;
	}

	.about-page__team {
		padding: 72px 18px;
	}

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

	.about-page__leaders {
		gap: 10px;
	}

	.about-page__leader-name {
		font-size: 13px;
	}

	.about-page__leader-role {
		font-size: 11px;
	}

	.about-page__cta {
		padding: 64px 18px 88px;
	}
}