@import url('fonts.css');

:root
{
	--page-padding:6px;
	
	--block-spacing:6px;
	--block-x-padding:32px;
	--block-y-padding:12px;
	--block-padding:24px var(--block-x-padding) 32px var(--block-x-padding);
	--header-height:120px;
	
	--block-transition:.4s ease 0s;
	--select-reveal:opacity .3s ease 0s;
	
	--body-width:1000px;
	--body-offset-width:calc(1.25 * var(--body-width));

	--dark:#292929;
	--light:#E8E8E8;
	--lighter:#E9E7E2;

	--button-hover:rgba(252,252,252,.5);
	
	--page-bg:var(--dark);
	--page-text:var(--light);
	
	--block-bg:var(--light);
	--footer-bg:#DBDBDB;

	--white:#fefefe;
	--dimm:rgba(5,1,0,.85);
	--blur-bg:rgba(203,198,185,.4);
	--blur-bg-off:rgba(203,198,185,1);
	--blur-bg-text:var(--dark);
	
	
	--accent:#2474FF;
	
	--orange:#FAAC00;
	--red:#D8211A;
	--green:#24AF91;
	--purple:#7659B0;
	--blue:#1769ED;

	--data:#7E8E93;
	--data-light:#B3CAD1;
	
	--label-shadow:0px 1px 1px 0px rgba(5,1,0,.15);
	

	--person:#24AF91;
	--collective:#3BD4B3;
	--organisation:#D3C492; --institute:#D3C492;
	--occupation:#d2b6c9;
	--country:#738DBE;
	--year:#8AB2D1;
	
	--instance:var(--light);


	--curve:cubic-bezier(.23,.34,.18,1);
	--slide-in-fast:.3s cubic-bezier(.23,.34,.18,1) 0s;

	
	
	/* media */
	
	--media-max-height:75vh;
	--media-margin-bottom:1em;
	--caption-margin-top:.75em;
	--caption-margin-left:1em;

	/* typo */
	
	--default-type:20px;
	--default-line:1.5;
	
	--logo-type:32px;
	--menu-type:22px;
	--submenu-type:30px;
	
	--footer-type:14px;
	--footer-line:1.2;

	--smallcaps-type:15px;
	--smallcaps-line:20px;

	--home-title-type:48px;
	--home-title-line:1.2;
	
	--body-title-type:32px;
	--body-title-line:1.2;
	--body-section-title-type:24px;
	--body-subsection-title-type:20px;
	--body-meta-type:13px;
	--body-caption-type:13px;

	--body-intro-type:24px;
	--body-intro-line:1.3;
	--body-quote-type:36px;

	--form-type:18px;
	--form-label-type:14px;
	
	--grid-title-type:32px;
	--grid-title-line:1.15;

	--grid-partner-title:26px;
	--grid-partner-line:30px;
	--grid-partner-short:16px;

	/* data type */
		
	--data-intro-type:32px;
	--data-intro-line:1.4;

	--data-title-type:24px;
	--data-query-type:22px;
	--data-query-intro-type:28px;

	/* --data-label-h:calc(30/18 * 1em); */
	--data-label-h:calc(31/18 * 1em);
	--data-label-p:calc(12/18 * 1em);
	/* --data-label-small-h:calc(24/13 * 1em); */
	--data-label-small-h:calc(25/13 * 1em);
	--data-label-small-p:calc(11/13 * 1em);
	
	--data-card-type:18px;
	--data-card-label:14px;
	--data-card-title-type:24px;
	--data-card-title-line:1.3;
}

@media (prefers-color-scheme: dark) /* NOTE not used, consider adding dark mode */
{
/* 
	:root
	{
		--blur-bg:rgba(63,58,45,.3);
		--blur-bg-off:rgba(63,58,45,1);
		--blur-bg-text:var(--lighter);

		--view-bg:rgba(30,30,30,1);
		--view-text:var(--lighter);
	}
	
	.label.blur-bg:hover,
	.label.blur-bg:hover .icon
	{
		color:var(--dark);
	}
 */
}

html
{
	height:100%;
}
body
{
	margin:0;
	padding:0;
	height:100%;
	
	font-family:'reformat-b-mono','courier new',sans-serif;
	font-size:var(--default-type);
	line-height:var(--default-line);
	font-weight:normal;
	font-style:normal;

	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	
	background-color:var(--page-bg);
	color:var(--light);
	
	scrollbar-color: rgba(5,1,0,.2) transparent;
	/* scroll-behavior: smooth; */
}

body.high-contrast
{
	/* overrule colors */

	--red:var(--dark);
	--green:var(--dark);
	--purple:var(--dark);
	--blue:var(--dark);
}

body.transition
{
	height:101%; /* keep scrollbar visible */
}
body *
{
	box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.is-hidden
{
	display:none !important;
}
.no-pointer-events
{
	pointer-events:none;
}
.pointer-events
{
	pointer-events:all;
}
.clickable
{
	cursor:pointer;
}
.no-transition
{
	transition:none !important;
}
.no-scrollbar
{
	scrollbar-width: none; /* FF */
	-ms-overflow-style: none; /* Edge */
}
.no-scrollbar::-webkit-scrollbar
{
	display: none;
}
.flex
{
	display:flex;
}
.flex.center
{
	justify-content: center;
}
.flex-center-vertical
{
	align-items: center;
}
.flex-wrap
{
	flex-wrap:wrap;
}
.flex-break
{
	flex-basis:100%;
	height:0;
}
.clear:after
{
	content:'';
	display:table;
	clear:both;
}
.full-width
{
	width:100% !important;
}
.nowrap
{
	white-space:nowrap;
}
a
{
	color:inherit;
	text-decoration: none;
	border-bottom:2px solid transparent;
}
a.button,
a[name]
{
	border:none;
}
a:hover,
a.selected
{
	border-bottom-color:inherit;
	/* color:var(--accent); */
}
.is-touch a:hover
{
	border-bottom-color:transparent;
}
.text-accent
{
	color:var(--accent);
}
.processing
{
	height:.8em;
	margin:0 .3em -.35em .3em;

}
.label.flex hd-only::before
{
	content:'\00a0';
}

/* typo */

.nadd-01
{
	font-family:'archief-alfabet-01',sans-serif;
}
.nadd-02
{
	font-family:'archief-alfabet-02',sans-serif;
}
.nadd-03
{
	font-family:'archief-alfabet-03',sans-serif;
}
.nadd-04
{
	font-family:'archief-alfabet-04',sans-serif;
}

.smallcaps
{
	text-transform:uppercase;
	letter-spacing:1px;
	font-size:var(--smallcaps-type);
	line-height:var(--smallcaps-line);
}
.ellipsis
{
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}
.underline
{
	border-bottom:2px solid;
}


/* section colors */

.red
{
	color:var(--red);
}
.red .fill,
.red .selected::before
{
	background-color:var(--red);
}
.green
{
	color:var(--green);
}
.green .fill,
.green .selected::before
{
	background-color:var(--green);
}
.purple
{
	color:var(--purple);
}
.purple .fill,
.purple .selected::before
{
	background-color:var(--purple);
}
.blue
{
	color:var(--blue);
}
.blue .fill,
.blue .selected::before
{
	background-color:var(--blue);
}
.button.fill
{
	color:var(--block-bg);
}


/* main layout */

header
{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	padding:var(--page-padding);
	padding-bottom:0;
	
	z-index:1000;
	
	transition:
		color .5s linear 0s,
		transform .3s var(--curve) 0s;
		
	pointer-events:none;
}
.data header
{
	transform:translateY(-100%);
	transition-delay:0s, .7s;
}

header .block
{
	margin-bottom:0;
	padding:var(--block-y-padding) var(--block-x-padding);
	width:100%;
	max-width:calc(100% - var(--block-spacing) * 2);

	justify-content: space-between;
	
	pointer-events:all;
}
header .block.full
{
	transition:transform .2s var(--curve) 0s;
}
header .block.collapsed
{
	display:none;
}
.page-logo
{
	margin-bottom:6px;
	font-size:var(--logo-type);
	letter-spacing:5px;
	line-height:1.2;
}
header .block.collapsed .page-logo
{
	margin-bottom:0;
}
.page-logo a
{
	display:block;
	border:none;
}

.page-menu
{
	position:relative;
	font-size:var(--menu-type);
	white-space:nowrap;
}
.page-menu a
{
	margin:0 20px;
	color:inherit;
	white-space: nowrap;
}
.page-menu a:hover,
.page-menu a.selected
{
	/* border-bottom:2px solid; */
}
.page-menu span:first-child a
{
	margin-left:0;
}
.page-menu span:last-of-type a
{
	margin-right:0;
}
.page-menu svg.contrast
{
	margin-bottom:-2px;
	height:.9em;
	width:.9em;
	cursor:pointer;
}

#pages
{
	position:absolute;
	left:0;
	width:100%;
	height:100%;

	transition:height .7s var(--curve) .25s;
	
	z-index:900; /* above data */
}
.home #pages
{
	top:0 !important;
	height:100%;
}
.data #pages
{
	height:0;
	overflow:hidden;
	transition-delay:.2s;
}
.data-transition #pages,
.data-transition #data
{
	overflow:hidden;
}


.page
{
	position:absolute;
	left:0;
	top:0;
	padding:var(--page-padding);
	width:100%;
	min-height:100%;
	/* padding-top:calc(var(--header-height) + var(--block-spacing)); */
	
	transition:opacity .1s ease-out 0s;
	z-index:100;
}
.page.prev,
.page.fixed
{
	position:fixed;
}
.page.next
{
	/* off screen next page */
	/* visibility:hidden; */
	/* transform:translateY(100vh); */
}
.page.next .block
{
	display:none;
}
.page.off
{
	opacity:0;
}

#data-toggle
{
	position:fixed;
	bottom:0;
	width:100%;
	padding: var(--block-y-padding) calc(var(--block-x-padding) + var(--block-spacing));
  
	pointer-events:none;

	transition:.5s var(--curve) 0s;

	z-index:1000;
}
.data:not(.data-transition) #data-toggle
/* .data #data-toggle */
{
	bottom:auto;
	top:0;
	transition:none;
}
.data.data-transition #data-toggle
{
	transform:translateY(calc(-100vh + 100%));
	transition-delay:0s;
}

#data-toggle .button
{
	margin:var(--block-spacing);
	margin-top:0;
	height:32px;

	border-radius: 6px;
	border-bottom:none;
	padding:3px 12px 5px 12px;
	
	background-color:rgba(55,55,55,.5);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	
	font-size:20px;
	line-height:25px;
	
	color:var(--light);
	text-shadow: 1px 1px 0px rgba(29,29,29,.1);
	
	pointer-events:all;
}
body:not(.data-transition) #data-toggle .button:hover
{
	background-color:var(--button-hover);
	color:var(--dark);
}

#data-toggle .button.pages .pages,
#data-toggle .button.data .data
{
	display:none;
}
#data-toggle .button .pages > span
{
	display:inline-block;
	margin-top:-2px;
}


/* blocks */

.block
{
	margin:var(--block-spacing);
	padding:var(--block-padding);
	border-radius:8px;
	background-color:var(--block-bg);
	transition:
		opacity var(--block-transition),
		box-shadow var(--block-transition),
		background-color var(--block-transition);
}
.block.shadow
{
	box-shadow:
		0 -1px 10px rgba(0,0,0,.06),
		0 1px 1px rgba(0,0,0,.15),
		inset 0 1px 0 #f3f3f3;
}
/* 
,
.grid.events .block .media
 */
.block.perforated
{
	mask-image:url(/media/archive-sheet-1100.svg); /* larger svgs (>1000) apear blurry on chrome, why? */
	mask-position:50% 0;
	mask-size:1100px auto;
	
	padding-top:50px; /* 24 + 20 */
}
.grid.partners .block.perforated
{
	mask-image:url(/media/archive-sheet-1100-narrow.svg);
}

.block:not(.in-view)
{
	opacity:0
}

/* 
.data-transition .block
{
	opacity:1 !important;
}
 */

.block.submenu
{
	padding:calc(var(--block-x-padding)/2) var(--block-x-padding);
	
	flex-direction: column;
	align-items: center;
	align-content: flex-start;

	font-size:var(--submenu-type);
}
.block.submenu span
{
	display:block;
	text-align:center;
	margin:5px 0;
	line-height: 1.1;
}
.block.submenu a
{
/* 
	display:inline;
	line-height:1.2;
	margin:5px 0;
 */
}

.block.filter
{
	padding:var(--block-y-padding) var(--block-x-padding);
	flex-wrap: wrap;
}


/* footer block */

footer
{
	justify-content: space-between;
	align-items: flex-start;
	padding-bottom:36px;
}
footer.block
{
	background-color:var(--footer-bg);
}
footer .home
{
	display:block;
	margin-bottom:24px;
	font-size:var(--logo-type);
	border:none;
}
footer > div
{
	flex-basis:25%;
}
footer .menu
{
	flex-direction:column;
	align-items:flex-start;
}
footer,
footer .smallcaps
{
	font-size:var(--footer-type);
	line-height: var(--footer-line);
}
footer a:not(.home)
{
	display:inline-block;	
	margin-bottom:5px;
	border-bottom-width:1px;
}
footer .menu a.selected
{
	border-bottom-color:transparent;
}
footer .info
{
	margin:1em 0 -1em 0;
}
footer .external
{
	flex-grow:1;
	margin:0 var(--block-x-padding);
	align-content: flex-start;
}
footer .external span
{
	display:inline-block;
}
footer .external span:not(:last-child)::after,
footer .info span:not(:last-child)::after
{
	content:'\00a0|\00a0';
}


/* home page */

body.home header .block
{
	background-color:transparent;
	background-image:linear-gradient(rgba(29,29,29,.8),transparent);
	box-shadow:none;
	transition: /* skip box-shadow transition */
		opacity .4s ease 0s,
		background-color .1s ease 0s;

	border-radius:0;
}
.home .page
{
	height:100%;
	padding-top:var(--page-padding) !important;
}

.highlights
{
	margin:var(--block-spacing);

	display:grid;
	grid-template-columns: calc(50% - var(--block-spacing)/2) calc(50% - var(--block-spacing)/2);
	grid-template-rows: 76% auto;
	grid-gap: var(--block-spacing);

	width:calc(100% - 2 * var(--block-spacing));
	height:calc(100% - 2 * var(--block-spacing));
}
.home .header
{
	grid-column: 1 / span 2;
	background-color:transparent;
	padding:0;
	/* width:calc(100% + 12px); */
	/* overflow:hidden; */
}
.home .highlights .block
{
	margin:0;
	aspect-ratio:auto;
}
.home .slides
{
	aspect-ratio:auto;
	height:100%;
	/* width:calc(100% + 12px); */
}
.home .slide
{
	position:relative;
	border-radius:8px;
	overflow:hidden;
	border-bottom:none;
}
.home .slide:last-of-type
{
	margin-right:0 !important;
}
.home overscroll
{
	display:none;
}
.home .slide .title
{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:auto;
	padding:var(--block-x-padding);
	
	background-image:linear-gradient(transparent,rgba(29,29,29,.8));
	
	z-index:100;
}	
.home .slide > .embed-wrapper
{
	pointer-events:none;
	height:100%;
	
}
.home .slide h2
{
	margin:0;
	width:600px;
	max-width:100%;
	font-weight:normal;
	font-size:var(--home-title-type);
	line-height:var(--home-title-line);
	user-select: none;
}
.home .slide h2 a
{
	display:inline-block;
}


.highlights .events
{
	grid-column: 1 / span 2; /* we're no longer using the 50/50 column grid here, may refactor later */

	height:100%;
	display:flex;
	justify-content:space-between;
	align-items:stretch;
}
.home .highlights .event
{
	padding-top:16px;
	overflow:hidden;
	
	flex-basis:calc(50% - var(--block-spacing)/2);
}
.data .highlights .event
{
	/* fade event block during data transition, looks better */
	opacity:0;
	transition-delay:0s !important;
}

.home .highlights .event .header
{
	text-align:center;
}
.home .highlights .event h2
{
	display:inline-block;
	font-weight:normal;
  font-size:var(--grid-title-type);
  line-height:var(--grid-title-line);

  border-bottom: 2px solid transparent;
}
.home .highlights .event:hover h2
{
	border-bottom-color:inherit;
}


/* grid */

.filter
{
	position:sticky;
	z-index:1000;
}

.filter span
{
	display:inline-block;
	margin:4px 11px;
	user-select: none;
	white-space:nowrap;
}
.filter span::before
{
	margin-right:6px;
	margin-bottom:1px;
	vertical-align:text-bottom;
	content:'';
	display:inline-block;
	width:13px;
	height:13px;
	border:1px solid;
	border-radius:50%;
	transition:background-color .2s ease 0s;
}
.filter span:not(.selected)::before
{
	background-color:transparent;
}

.grid
{
	margin:calc(var(--block-spacing)/2);

}

subsection .grid
{
	align-content: flex-start;
}
.block + section.grid,
subsection .grid
{
	/* less spacing to previous block */
	margin-top:calc(var(--block-spacing)/-2);
}
.grid + footer,
subsection + .block
{
	/* less spacing to next block */
	margin-top:calc(var(--block-spacing)/2);
}
.grid .block,
.home .event
{
	display:block;
	
	margin:calc(var(--block-spacing)/2);
	flex-basis:calc(50% - var(--block-spacing));
	aspect-ratio: 3/2;
	
	cursor:pointer;
	
	border-bottom:none;
}

.grid .block.msg
{
	/* flex-basis:100% !important; */
	flex-basis:calc(100% - 6px) !important;
	aspect-ratio:auto;
	text-align:center;
	background-color:var(--footer-bg);
}
.grid:not(.events) .block .header
{
	margin:6px 0;
	font-size:12px;
}

.grid .block h2
{
	font-weight:normal;
	font-size:var(--grid-title-type);
	line-height:var(--grid-title-line);
	margin:var(--block-y-padding) 0;
}
.grid .block .more
{

}

.block .media
{
	position:relative;
	border-radius:6px;
	overflow:hidden;
	
	/* transition:background-color .5s linear 0s; */
}
.block .media[data-src]
{
	aspect-ratio:16/9;
}

.block .media img
{
	width:100%;
	display:block;
	aspect-ratio:16/9;
	object-fit:cover;
	
	transition:opacity .5s linear 0s;
}

.block .media .hover
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	opacity:0;
	
	transition:opacity 1s linear 0s;
}
.block .media .hover img
{
	filter:grayscale(100%) contrast(110%);
	mix-blend-mode: screen;
}
body:not(.is-touch) .block:hover .media .hover
{
	opacity:1;
	transition-duration:.1s;
}
.block:hover .more
{
	border-bottom:2px solid;
}


@media (min-width:900px)
{
	/* single block in a sub-section, span full width (only on larger screens) */

	subsection .grid:not(.partners):not(.events) .block:first-child:last-child
	{
		flex-basis:100%;
		display:flex;
		aspect-ratio:auto;
	}
	subsection .grid:not(.partners):not(.events) .block:first-child:last-child .media
	{
		width:calc(50% - (var(--block-x-padding) * 1));
		margin-right:var(--block-x-padding);
		flex-shrink: 0;
	}
}


/* partners grid (4/row) */

.grid.partners
{
	align-content: flex-start;
}
.grid.partners .block
{
	flex-basis:calc(25% - var(--block-spacing));
	flex-grow:0;
	flex-shrink:0;
	
	--p:min(24px,var(--block-x-padding));
	
	/* padding:clamp(15px,calc(32/1600 * 100vw),32px); */
	padding:44px var(--p) 32px var(--p);
}
.grid.partners .block .media
{
	display:none;
}
.grid.partners .block h2
{
	margin-top:6px;
	font-size:var(--grid-partner-title);
	line-height:var(--grid-partner-line);
	/* hyphens: auto; */
	/* word-break:auto-phrase; */
	word-break:break-word;
	text-wrap:balance;
}
.grid.partners .block p
{
	font-size:var(--grid-partner-short);
}


/* events grid (2/row) */

.grid.events .block:not(.msg)
{
	padding:0;
	display:flex;
	flex-direction: column;
}
.grid.events .block section
{
	padding:6px var(--block-x-padding) 32px var(--block-x-padding);
	/* border-radius:0 0 8px 8px; */
	flex-grow:1;
}
.grid.events .block .media
{
	border-radius:6px 6px 0 0;
}

.grid.events.past .block .media .hover
{
	opacity:1;
}
body:not(.is-touch) .grid.events.past .block:hover .media .hover
{
	opacity:0;
	transition-duration:.1s;
}
.grid.events .block .header
{
	margin-top:6px;
	text-align:center;
}
.grid.events.past .block .header .time
{
	display:none;
}


/* search */

body.search
{
	color:var(--dark);
}
.page-search
{
	position: absolute;
	right:-10px;
	bottom:0;
	width:100%;
	height:40px;
}
.page-search svg
{
	position:absolute;
	right:8px;
	bottom:8px;
	z-index:1;
	display:none;
}
.page-search svg *
{
	pointer-events:none;
}
.page-search:not(.reset) .toggle,
.page-search.reset .reset
{
	display:block;
}

.page-search form.jf
{
	position:absolute;
	margin:0;
	right:0px;
	bottom:0px;
	font-size:var(--form-type);
	width:300px;
}
.page-search form.jf input
{
	margin:0;
	transition:opacity .2s ease 0s;
	opacity:0;
}
.page-search.active form.jf input
{
	opacity:1;
}

.home .page-search form.jf input
{
	background-color:rgba(29,29,29,.3);
}
.home .page-search form.jf input::placeholder
{
	opacity:.7;
}

.grid.search-result .block
{
	padding-top:8px;
}
.grid.search-result .block.msg
{
	padding-top:32px;
}
.grid.search-result .block .header
{
	text-align:center;
	margin-bottom:16px;
	/* color:var(--dark); */
}
.grid.partners.search-result .block:not([href*="partners/"]) .media /* show media, but not for partner items */
{
	display:block;
}





/* item contents */

article
{

}

article > *
{
	max-width:var(--body-width);
	margin-left:auto;
	margin-right:auto;
}

article .date
{
	max-width:none;
}

article .slides:empty
{
	display:none;
}

/* 
article .header.cms-inline-media
{
	width:calc(100% + var(--block-x-padding));
}
 */
 
article .cms-inline-media
{
	margin-bottom:1em;
}
article .cms-inline-media:not(:has(.slide))
{
	display:none;
}
 
article .cms-inline-media + .cms-inline-media
{
	/* margin-top:1em; */
}


article .cms-inline-media:has(.slide:not(.single))::after
{
	content:attr(data-caption);
	display:block;
	margin-top:.75em;
	font-size:var(--body-caption-type);

	max-width:77%;
	min-height:1.5em;
}

article .slide.single
{
	position:relative;

	max-width:77%;
	
	display:flex; /* for right aligned caption */
}
article .slide.single img
{
	flex-shrink:0;
}
article .slide.single .caption
{
	padding-left:var(--caption-margin-left);

	width:calc(100% - 77%);
	flex-shrink:0;
	
	font-size:var(--body-caption-type);
}


article .top
{
	position:sticky;
	left:0;
	top:0;
	margin-top:5px;
	float:left; /* takes it out of elms flow */

	/* z-index:1; */
}
.top,
.top a
{
	font-size:11px;
	line-height:1;
	border-bottom-width:1px;
}
article .intro:empty + .header:not(.empty),
article .intro:empty + .header:has(.slides:empty) + .cms-inline-media,
article .top + .header:not(.empty)
{
	/* place media at top of block over the .top link */
	float:left; 
	margin-top:-16px;
}

article .meta
{
	font-size:var(--body-meta-type);
}

body:not(.scrolled) .top
{
 	visibility: hidden;
}

/* article.long-read h1, */
article h1,
article h2,
.data .block h2
{
	margin-top:0;
	max-width:none;
	font-weight:normal;
	font-size:var(--body-title-type);
	line-height: var(--body-title-line);
}
article h1.admin,
article h2.admin
{
	cursor:pointer;
}
article h1.admin:hover:after,
article h2.admin:hover:after
{
	display:inline-block;
	content:'EDIT';
	font-size:12px;
	line-height:12px;
	
	background-color:var(--dark);
	color:var(--light);
	vertical-align: top;
	border-radius:6px;
	padding:4px 6px;
	margin-left:6px;
}
article h2:not(:first-child)
{
	max-width:var(--body-offset-width);
	font-weight:normal;
	font-size:var(--body-section-title-type);
}
article h3
{
	margin-bottom:0;
	padding-left:36px;
	font-weight:normal;
	font-size:var(--body-subsection-title-type);

	text-transform:uppercase;
	letter-spacing:1px;
}
article h3 + p
{
	margin-top:0;
}

article .intro
{
	margin-bottom:1em;
	font-size:var(--body-intro-type);
	line-height: var(--body-intro-line);
}
article .intro:empty
{
	display:none;
}
article p
{
	padding-right:7%;
}

article a:not(.smallcaps):not([name])
{
	border-bottom:1px solid;
}
article > .cms-inline-media
{
	width: calc(100% + var(--block-x-padding));
	max-width:none;
}

article blockquote
{
	max-width:var(--body-offset-width);
	font-family:'archief-alfabet-01',sans-serif;
	font-size:var(--body-quote-type);
	letter-spacing:5px;
}
article blockquote p
{
	margin:0;
}

form.jf
{
	font-size:var(--form-type);
	margin:auto;
	margin-bottom:var(--default-type);
	
	--accent:currentColor;
}
article form.jf .smallcaps
{
	font-size:var(--form-label-type);
	padding-left:12px;
}
form.jf input,
form.jf textarea
{
	border-radius:8px !important;
	padding-left:12px !important;

	line-height:1.35;
	height:auto;
}

article form.jf input[type="submit"]
{
	padding:0 12px;
	height:32px;
}
article form.jf input[type="submit"].disabled
{
	color:transparent;
}
article form.jf .label.submit
{
	margin:0;
}
article form.jf .label.submit.processing
{
	padding-left:12px !important;
}
article form.jf .label.submit.processing::after
{
	content:url(../media/processing-light.svg);
	left:calc(50% - 9px);
	top:4px;
}


article .slides
{
	width:100%;
	max-height:var(--media-max-height);
	aspect-ratio: auto;
}
article .slides .slide
{
	max-height:var(--media-max-height);
}

article .cms-inline-media-thumb
{
	display:none;
}
article .slide img
{
	border-radius:6px;
}

article .slides .slide
{
	opacity:0;
	transition:opacity .5s ease 0s;

/* 
	width:77%;
	margin-right:7%;
 */
}
article .slide.in-view
{
	opacity:1;
}
.slides
{
	aspect-ratio:auto;
}
.slides + .navigation
{
	display:none;
}
.slides + .navigation .dot
{
	border-radius:3px;
	background-color:var(--light);
}
.slides .slide .embed-wrapper
{
	/* width:100%; */
	max-height:var(--media-max-height);
	
	border-radius:6px;
	overflow:hidden;
	flex-shrink:0;
	background-size:cover;
}
.slides .slide.single .embed-wrapper
{
	height:100%;
}
.home .slide .embed-wrapper > div
{
	height:100%;
}


@-moz-document url-prefix()
{ 
	/* could not find another way to fix FF line-height inconsistency */
	aside label { padding:2px 6px 0 6px }
	#data-toggle .button { padding:5px 12px 2px 12px }
}


/* responsive views */

@media (max-width:1350px)
{
	:root
	{
		--grid-partner-title:max(22px,calc(26/1350 * 100vw));
	}
	
	.grid.partners .block
	{
  	flex-basis: calc((100% / 3) - var(--block-spacing));
	}
	
	article .top
	{
		position:relative; /* non-sticky as it will over text */
		margin-top:-17px;
		top:0 !important;
	}

}

@media (max-width:1280px)
{
	:root
	{
		--logo-type:calc(32/1280 * 100vw);
		--menu-type:max(19px, calc(22/1280 * 100vw));
		--home-title-type:calc(48/1280 * 100vw);
		--submenu-type:calc(30/1280 * 100vw);
		--grid-title-type:calc(32/1280 * 100vw);
		--body-title-type:calc(32/1280 * 100vw);
		--body-intro-type:calc(26/1280 * 100vw);
		
		--block-x-padding:calc(32/1280 * 100vw);
	}
}

@media (max-width:900px) /* single column layout below 900 */
{
	:root
	{
		--block-x-padding:15px;
	
		--default-type:18px;
		/* --default-line:1.5; */
		
		--logo-type:24px;
		--menu-type:20px;
		--home-title-type:34px;	
		--submenu-type:26px;
		--grid-title-type:26px;
		--body-title-type:26px;		
		--body-intro-type:20px;
		
		--grid-partner-title:26px;
	}
	
	hd-only
	{
		display:none;
	}
	body
	{
		word-break:break-word;
	}
	.page-logo
	{
		word-break:normal;
	}
	
	body.home:not(.data) #data-toggle
	{
		transform: translateY(var(--block-y-padding));
	}

	body.home header .block.full
	{
		background-image:linear-gradient(rgba(29,29,29,.98),rgba(29,29,29,.25) 85%,transparent);
	}
 	header .block.full
 	{
 		position:absolute;
 		width:calc(100% - 2 * (var(--page-padding) + var(--block-spacing)));
 		z-index:1;
 	}
 	body:not(.menu) header .block.full
 	{
 		transform:translateY(calc(-100% - 12px));
 	}
 	header .block.collapsed
 	{
 		display:flex;
 		position:relative;
 	}
 	body:not(.home) .block.collapsed
 	{
 		/* transition-delay:.2s; */
 	}
 	body.menu header .block.collapsed
 	{
 		opacity:0;
 	}
	header .top
	{
		display:none;
		position:absolute;
		left:50%;
		top:0px;
		height:100%;
		transform:translateX(-50%);
		font-size:11px;
	}
	body.scrolled .top
	{
		display:block
	}
	header .top a
	{
		display:flex;
		align-items: center;
		height:100%;
		border:none;
	}

	.page-menu
	{
		display:flex;
		flex-wrap:wrap;
		text-align:right;
	}
	.page-menu span
	{
		flex-basis:100%;
	}
	.page-menu span.lan
	{
		flex-basis:calc(100% - .9em - 20px);
	}
	.page-menu span.lan + span
	{
		flex-basis:calc(.9em + 20px);
	}
	.page-menu a
	{
		margin:0;
	}
	.page-search
	{
		position:relative;
	}
	.page-search form.jf input
	{
		padding:.28em;
	}
	
	.highlights 
	{
		grid-template-columns:100%;
	}
	.highlights .header,
	.highlights .events
	{
		grid-column-end:1;
	}
	.highlights .events .event
	{
		flex-shrink:0;
		flex-basis:90%;
		scroll-snap-align: start;
		
		font-size:16px;
	}
	.highlights .events .event:first-child
	{
		margin-right:6px;
	}
	
	.grid .block
	{
		flex-basis:100%;
	}
	.grid.partners .block
	{
		flex-basis:calc(50% - var(--block-spacing));
	}

	
	
	.block.filter
	{
		flex-wrap: wrap;
	}
	
	article p
	{
		padding-right: 0;
	
	}

	article .top
	{
		display:none !important;
	}

	
	article .slide.single
	{
		max-width:calc(100% - var(--block-x-padding));
		flex-wrap: wrap;
	}
	
	article .slide.single .caption
	{
		padding-left:0;
		padding-top:var(--caption-margin-top);
		width:100%;
	}
	.slides .slide .embed-wrapper
	{
		width:100%;
	}
/* 
	article .slide.single .caption
	{
		position:relative;
		left:auto;
		top:auto;
		width:100%;
		margin-top:1em;
	}
 */

	article .slides:has(.slide.single)
	{
		display:block;
	}
	
	footer 
	{
		flex-wrap:wrap;
	}
	footer .menu
	{
		position:relative;
		flex-grow:1;
		padding-bottom:48px;
	}
	footer .menu .info 
	{ 
		position:absolute; /* keep the info links on single line */
		margin:0;
		bottom:0;
		width:200%;
	}
	footer .external
	{
		margin:calc((var(--footer-line) * var(--logo-type)) + 24px) 0 0 0;
		flex-direction: column;
	}
	footer .external span::after
	{
		content:'' !important;
	}
	footer .contact
	{
		margin-top:24px;
		flex-basis: 100%;
	}
}

@media (max-width:700px)
{
	.highlights
	{
		grid-template-rows:1fr auto;
	}
	.highlights .event.block
	{
		padding-bottom:18px;
	}
	
	.block.perforated
	{
		mask-image:url(/media/archive-sheet-1100-narrow.svg);
	}
	.grid.partners .block
	{
    flex-basis:calc(100% - var(--block-spacing));
  }
}

@media (max-width:400px)
{
	:root
	{
		--home-title-type:calc((31/400) * 100vw);
		--grid-title-type:calc((26/400) * 100vw);
	}

	.highlights .events .event h2
	{
		font-size:calc((24/400) * 100vw);
	}

}