@font-face {
	font-family: "Marianne";
	font-weight: 700;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Bold_Italic.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 700;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Bold_Italic.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 800;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-ExtraBold_Italic.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 800;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-ExtraBold_Italic.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 300;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Light_Italic.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 800;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-ExtraBold.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 300;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Light.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 500;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Medium_Italic.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 500;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Medium.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 500;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Medium.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 400;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Regular_Italic.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 400;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Regular.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 250;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Thin_Italic.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 700;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Bold.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 700;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Bold.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 800;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-ExtraBold.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 300;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Light_Italic.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 300;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Light.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 400;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Regular.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 500;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Medium_Italic.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 250;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Thin_Italic.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 250;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Thin.woff");
}

@font-face {
	font-family: "Marianne";
	font-weight: 400;
	font-style: italic;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Regular_Italic.woff2");
}

@font-face {
	font-family: "Marianne";
	font-weight: 250;
	font-style: normal;
	font-stretch: 100%;
	src: url("../fonts/Marianne-Thin.woff2");
}

/* 
	Design tokens
	-------------

	Breakpoints:

	- 40em: phone
*/	
:root {
	/* Spacing */
	--space-xs: 0.25rem;
	--space-s: 0.5rem;
	--space-m: 1rem;
	--space-l: 1.5rem;
	--space-xl: 2rem;
	--space-xxl: 4rem;

	/* Font size */

	/* Color */
	--color-brand: #3558a2;
	--color-gray: #ddd;
	--color-accent: #ffcc00;
	--color-white: white;
	--color-offwhite: #f0f0f0;
	--color-black: black;

	/* Thickness */
	--thickness-s: 1px;
	--thickness-m: 2px;
	--thickness-l: 3px;

	/* Aspect ratio */
	--aspect-cover: 2.5;
	--aspect-landscape: 3/2;
	--aspect-square: 1;
	--aspect-poster: 5/7;
}

html {
	font-family: Marianne;
	font-size: 100%;
	line-height: 1.5;
}

body {
	margin: 0;
	--space-inline: var(--space-xl);
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.15;
	margin: var(--space-m) 0;
	text-wrap: balance;
}

h1 {
	font-size: 4em;
	letter-spacing: -0.025em;
	margin: var(--space-xl) 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-m);
}

h1 div {
	font-weight: normal;
}

@media (max-width: 40em) {
	h1 {
		font-size: 2.4em;
	}
}

article {
	padding: var(--space-m) var(--space-inline);
}

a {
	color: inherit;
	text-underline-offset: 0.15em;
}

a img {
	border: none;
}

a img {
	display: block;
}

/*
	Stupid hack for iOS Safari 26 to prevent it from rendering things
	underneath the top toolbar / dynamic island.
*/

header .ios-26-bar {
	content: '';
	display: block;
	background: var(--color-white); 
	height: 5px; 
	left: 0; 
	right: 0; 
	top: 0;
	position: sticky; 
}

.presented-by {
	font-weight: bold;
	font-size: 0.8em;
	line-height: 1;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: var(--space-s);
	padding: var(--space-s);
	margin-inline-start: auto;
}

header nav {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--space-xl);
	background: var(--color-white);
	padding: 0 0 0 13rem;
}

header nav div {
	flex-shrink: 1;
	flex-grow: 1;
	justify-content: space-between;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-xl);
	align-items: center;
}

.language-switcher {
	/*margin-inline-start: auto;*/
	/*margin-right: var(--space-m);*/
	text-transform: uppercase;
}

header a {
	text-decoration: none;
}

header a:is(:hover,:focus-visible) {
	text-decoration: underline;
}

header nav ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	background: var(--color-white);
	gap: 0 var(--space-xl);
	font-size: 1.25em;
}

header nav li a {
	padding: var(--space-s) 0;
	display: block;
}

.site-logo {
	position: absolute;
	display: block;
	width: 8rem;
	padding: 1.33rem 1.25rem 1rem;
	left: var(--space-m);
	top: 0;
	background: var(--color-white);
}

.site-logo img {
	width: 100%;
}

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

:focus-visible {
	outline: var(--thickness-m) solid currentColor;
	outline-offset: var(--space-xs);
}

.active {
	font-weight: bold;
}

[href='#main'] {
	position: absolute;
	left: var(--space-m);
	top: -10em;
	background: var(--color-accent);
	padding: var(--space-s) var(--space-m);
}

[href='#main']:focus {
	z-index: 100;
	top: var(--space-m);
	outline-offset: 0;
}

/*
	Kirby admin bar 
*/

.kirby-admin-bar {
	padding: var(--space-m);
	border-top: var(--thickness-s) solid;
}

.kirby-admin-bar ul {
	display: flex;
	list-style: none;
	padding: 0;
	flex-wrap: wrap;
	gap: var(--space-m);
}

/*
	Layout basics (preliminary)
*/

.columns {
	display: grid;
	list-style: none;
	padding: 0;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--space-xl);
}

@media (max-width: 40em) {
	.columns {
		display: flex;
		flex-direction: column;
	}
}

/*
	Film item
*/
.film-item > a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.film-item > a:is(:hover, :focus-visible) .film-title {
	text-decoration: underline;
}

.film-item p {
	margin: 0;
}

.film-item .film-title {
	font-size: 1.6em;
	margin: var(--space-m) 0;
	font-weight: bold;
	/*min-height: 2lh;*/
}

.film-item .film-title-alt {
	font-weight: normal;
	/*display: inline;*/
	/*margin-inline-start: 0.5em;*/
}

.film-item img {
	width: 100%;
	aspect-ratio: var(--aspect, var(--aspect-poster));
	object-fit: cover;
	display: block;
	object-position: var(--focus, 50% 50%);
} 

.film-item .film-meta {
	font-weight: bold;
}

/* Film section */

.film-section-intro {
	margin: var(--space-xl) 0;
}

.film-section-color {
	display: inline-block;
	width: 1em;
	height: 1em;
	box-sizing: border-box;
	background: var(--color, var(--color-black));
	border-radius: 50%;
	transform: translate(0, 0.175em);
	flex-shrink: 0;
}

.film-section-label:has(.film-section-color) {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-m);
	align-items: flex-start;
}

.film-sections .film-section-label:has(.film-section-color) {
	align-items: center;
	gap: 0.5em;
}

.film-sections .film-section-color {
	transform: translate(0, 0.1em);
}

:is(h1, h2) a {
	text-decoration-color: var(--color-gray);
	text-decoration-thickness: var(--thickness-l);
	text-underline-offset: 0.15em;
}

:is(h1, h2) a:is(:hover, :focus-visible) {
	text-decoration-color: currentColor;
}

.film-section {
	padding-bottom: var(--space-xl);
	margin-bottom: var(--space-xl);
	border-bottom: var(--thickness-s) solid;
}

.film-section h2 {
	font-size: 2.4em;
	letter-spacing: -0.02em;
	margin-block: var(--space-xl);
}

.film-section .columns {
	gap: var(--space-xxl) var(--space-xl);
}

/*
	Film page
*/

.page-cover {
	margin: calc(-1 * var(--space-m)) calc(-1 * var(--space-inline)) 0;
	position: relative;
}

.page-cover a {
	position: absolute;
	bottom: 0;
	right: var(--space-m);
	display: block;
	padding: var(--space-m) var(--space-xl); 
	text-transform: uppercase;
}

.page-cover img {
	width: 100%;
	aspect-ratio: var(--aspect-cover);
	object-fit: cover;
	display: block;
	object-position: var(--focus, 50% 50%);
}

@media (max-width: 40em) {
	.page-cover img {
		aspect-ratio: var(--aspect-square);
	}
}

.film-gallery .film-poster img {
	aspect-ratio: auto;
}

.film-awards::before {
	content: '';
	display: block;
	width: 4em;
	height: var(--thickness-m);
	background: currentColor;
	margin: var(--space-m) 0;
}

@media (max-width: 40em) {
	.film-awards {
		display: flex;
		flex-direction: column;
	}
}

.film-awards p {
	text-wrap: balance;
	margin: 0;
}

.film-sections {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: var(--space-m) 0 var(--space-s);
	text-transform: uppercase;
	font-weight: bold;
	gap: 0 var(--space-m);
}

.film-sections + h1 {
	margin-top: 0;
}

.film-sections li {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-m);
	align-items: center;
}

.film-sections li:not(:last-child)::after {
	content: '';
	display: block;
	height: 2em;
	width: 0.1em;
	background: currentColor;
	transform: rotate(30deg);
}

.film-sections a {
	text-decoration: none;
	display: block;
	padding-block: var(--space-xs);
}

.film-sections a:is(:hover, :focus-visible) {
	text-decoration: underline;
}

.film-gallery {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	height: 10em;
	list-style: none;
	padding: var(--space-m);
	margin: 0 calc(-0.5 * var(--space-inline));
	gap: var(--space-m);
}

@media (max-width: 40em) {
	.film-gallery {
		height: 6em;
		gap: var(--space-s);
		padding: var(--space-s);
	}
}

.film-gallery li {
	flex-shrink: 0;
	scroll-snap-align: center;
}

.film-gallery img {
	aspect-ratio: var(--aspect-landscape);
	object-fit: cover;
	object-position: var(--focus, 50% 50%);
}

.film-gallery li, 
.film-gallery a, 
.film-gallery img {
	display: block;
	height: 100%;
	width: auto;
}

/*
	Buttons
*/

.btn {
	background: var(--color-accent);
	padding: var(--space-m);
	font-weight: 700;
	color: inherit;
	text-decoration: none;
	text-align: center;
	display: inline-block;
}

.btn:is(:hover, :focus-visible) {
	text-decoration: underline;
}

.trailer-btn svg {
	fill: currentColor;
	display: block;
	width: 100%;
	height: 2.5em;
	/*opacity: 0.5;*/
}

.trailer-btn {
	aspect-ratio: var(--aspect-landscape);
	box-sizing: border-box;
	font-size: 1.25em;
	display: grid !important;
	align-content: center;
}

/*
	Schedule
*/

.schedule-head {
	display: flex;
	gap: var(--space-m);
	align-items: flex-start;
	margin: var(--space-xl) 0;
}

.schedule-page-title,
.schedule-filter summary {
	font-size: 4em;
	letter-spacing: -0.025em;
	line-height: 1.15;
	margin: 0;
}

.schedule-page-title {
	margin-bottom: 0;
}

.schedule-filter summary {
	display: inline-flex;
	cursor: pointer;
	gap: 0.25em;
	z-index: -1;
}

.schedule-filter .schedule-filter-value {
	text-decoration: underline;
	text-decoration-color: var(--color-gray);
	text-decoration-thickness: var(--thickness-l);
	text-underline-offset: 0.15em;
}

.schedule-filter-icon {
	font-size: 1.5rem;
	display: grid;
	border-radius: var(--space-xs);
	width: 1.5em;
	height: 1.5em;
	box-sizing: border-box;
	line-height: 1;
	align-self: center;
	align-content: center;
	justify-content: center;
	margin-top: 0.8em;
}

.schedule-filter summary:is(:hover, :focus-visible) .schedule-filter-value,
.schedule-filter[open] .schedule-filter-value {
	text-decoration-color: currentColor;
}

.schedule-filter summary:is(:hover, :focus-visible) .schedule-filter-icon,
.schedule-filter[open] .schedule-filter-icon {
	background: var(--color-black);
	color: var(--color-white);
}

.schedule-filter ul {
	list-style: none;
	padding: 0;
	margin: var(--space-m) 0;
	display: flex;
	flex-wrap: wrap;
	font-size: 1.25em;
}

@media (max-width: 40em) {
	.schedule-filter li {
		width: 100%;
	}

	.schedule-head {
		display: block;
	}

	.schedule-page-title,
	.schedule-filter summary {
		font-size: 2.4em;
	}

	.schedule-filter-icon {
		margin-top: 0.3em;
	}
}

.schedule-filter li {
	--thickness: var(--thickness-m);
	border: var(--thickness) solid;
	margin-right: calc(-1 * var(--thickness));
	margin-bottom: calc(-1 * var(--thickness));
}

.schedule-filter a {
	display: block;
	text-decoration: none;
	padding: var(--space-xs) var(--space-m);
}

.schedule-filter a:is(:hover, :focus-visible) {
	text-decoration: underline;
}

.schedule-filter a.active {
	background: var(--color-accent);
}

.schedule-section {
	margin-bottom: var(--space-xl);
}

.schedule-section-heading {
	font-size: 2.4em;
	letter-spacing: -0.02em;
	position: sticky;
	top: 0;
	background: var(--color-white);
	z-index: 10;
	padding: var(--space-m) 0;
	margin: 0;
}

.schedule-item {
	border-bottom: var(--thickness-s) solid;
	display: grid;
	grid-template-columns: 16em 1fr;
	gap: var(--space-m);
	margin-bottom: var(--space-s);
}

.schedule-item .film-sections {
	margin: 0 0 var(--space-s);
}

.schedule-item-image img {
	width: 100%;
	height: 100%;
	aspect-ratio: 12; /* dummy value, TODO explain */
	object-fit: cover;
	object-position: var(--focus, 50% 50%);
}

.schedule-item-title {
	font-size: 1.8em;
	margin: 0;
	min-height: 2lh;
}

.schedule-item-title a {
	text-decoration: none;
	display: inline-block;
}

.schedule-item-title a div {
	font-weight: normal;
}

.schedule-item-title a:is(:hover, :focus-visible) {
	text-decoration: underline;
}

.film-schedule-item {
	display: grid;
	grid-template-columns: 8em 1fr 5em;
	padding: var(--space-m) 0;
	border-bottom: 1px solid;
}

.film-schedule-item-time {
	font-size: 2em;
	font-weight: bold;
}

.film-schedule-item-location {
	font-size: 1.4em;
	margin: var(--space-s) 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--space-s);
	line-height: 1.15;
}

.film-schedule-item-location a {
	text-decoration: none;
}

.film-schedule-item-location a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-decoration-thickness: var(--thickness-m);
	text-underline-offset: 0.15em;
}

.film-schedule-item-location > *:first-child {
	font-weight: bold;
}

@media (max-width: 40em) {
	.schedule-item {
		display: flex;
		flex-direction: column;
		margin-bottom: var(--space-s);
	}

	.schedule-item-image img {
		height: auto;
		aspect-ratio:var(--aspect-landscape);
	}

	.schedule-item-title {
		min-height: auto;
	}
}

/* Cover */
.cover-placeholder {
	margin: calc(-1 * var(--space-m)) calc(-1 * var(--space-inline)) 0;
	height: 6.25rem;
	background: var(--background, var(--color-offwhite));
}

/*
	Guest item
*/

.guest-item {

}

.guest-name {
	font-size: 2em;
	font-weight: bold;
}

/*
	Guest page
*/

.guest-photo {
	width: 10em;
}

.guest-photo img {
	height: auto;
	aspect-ratio: var(--aspect-square);
	object-fit: cover;
	object-position: var(--focus, 50%, 50%);
}

/*
	Footers
*/

footer {

}

.footer-section {
	padding: var(--space-xl) var(--space-inline);
}

.footer-section--festival {

}

.footer-section--institute {
	background: var(--color-brand);
	color: var(--color-white);
	display: none;
}

.footer-section--embassy {

}

/*
	Section page
*/

.section-intro,
.film-section-intro {
	max-width: 50rem;
	font-size: 1.25em;
	margin-block: var(--space-xl);
}

.section-description {
	margin-block: var(--space-xl);
	max-width: 50rem;
}

/*
	Edition partners
	----------------
*/

.edition-partners {
	padding: var(--space-xl) var(--space-inline);
	background: var(--color-offwhite);
}

.edition-partners-category {
	margin: var(--space-xl) 0;
}

.edition-partners-category-heading {
	font-weight: bold;
	margin: var(--space-m) 0;
	/*text-transform: uppercase;*/
}

.edition-partners-list {
	list-style: none;
	padding: 0;
	margin: var(--space-l) 0;
	/*display: flex;*/
	/*flex-wrap: wrap;*/
	/*gap: var(--space-m) var(--space-xxl);*/
	display: grid;
	--grid-column-size: 8rem;
	grid-template-columns: repeat(auto-fit, minmax(var(--grid-column-size), 1fr));
	justify-items: center;
	gap: var(--space-l) var(--space-xxl);
}

.edition-partners-list li {
	display: block;
}

.edition-partners-list a {
	display: block;
}

.edition-partners-list img {
	height: 5rem;
	width: auto;
	display: block;
}

.edition-editorial {
	max-width: 50rem;
	margin: var(--space-xl) 0;
}

/*
	Organizer list
*/

.organizer-list {
	list-style: none;
	padding: 0;
	margin-bottom: var(--space-xl);
	display: flex;
	gap: 0 var(--space-xl);
}

.organizer-list img {
	height: 7rem;
	width: auto;
}

/*
	Responsive adjustments
	----------------------
*/

@media (max-width: 40em) {
	html {
		font-size: 90%;
	}

	body {
		--space-inline: var(--space-m);
	}

	.edition-partners-list img {
		height: 4rem;
	}

	header nav {
		padding: var(--space-m) var(--space-inline);
	}

	.site-logo {
		position: static;
		padding: 0;
		width: 6.25rem;
	}

	.presented-by {
		padding: 0;
		flex-direction: column;
		align-items: flex-end;
	}

	header nav li a {
		padding: 0;
	}

	header nav {
		align-items: flex-start;
	}

	header nav div {
		order: 2;
		flex-grow: 1;
		justify-content: space-between;
		margin: var(--space-m) 0 0;
	}

	.cover-placeholder {
		display: none;
	}

	.edition-partners-list {
		/*justify-items: start;*/
		--grid-column-size: 6rem;
		gap: var(--space-m);
	}
}