:root {
	--color-black:#0b0c10;
	--color-white:#ffffff;
	--color-eggshell: #eaeef2;
/* globale defaults */
--color-bg: #eaeef2;
--color-text: #0b0c10;
--color-accent: #3366ff;
	//color-scheme: light; /* of 'dark'; je mag dit ook door JS laten wisselen */
}

html,body{
	height:100%;margin:0;padding:0;
	background:var(--color-bg,#0b0c10); color:var(--color-text,#eaeef2);
	transition: background-color 0.4s ease, color 0.4s ease;
	will-change: background-color, color;
	& *, *::before, *::after {
		-webkit-font-smoothing: antialiased; 
		-moz-osx-font-smoothing: grayscale; 
		-webkit-box-sizing: border-box; 
		-moz-box-sizing: border-box; 
		-ms-box-sizing: border-box; 
		-o-box-sizing: border-box; 
		box-sizing: border-box;
	} 
}
body {
	font-family: 'Swiza', sans-serif;
    font-size: clamp(
	  16px,
	  16px + (21 - 16) * ((100vw - 420px) / (1280 - 420)),
	  21px
	);
	line-height: 1.6em;
}
body > header {
	position: fixed; top:0; left:0; right:0; width:100%; z-index: 100; pointer-events: none;
	background:linear-gradient(to bottom,rgba(11,12,16,1),rgba(11,12,16,0));
	& > section {
		display: flex; flex-direction: row; flex-wrap: nowrap; 
		align-items: center; justify-content: space-between;
		padding: 2em 1em; column-gap: 2em;
		& > nav {
			flex-grow: 1; position: relative; isolation: isolate;
			& ul {
				display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;
				list-style: none; padding:0; margin: 0; column-gap: 2em;
				& li {
					flex: 0 0 auto;
					& a {
						font-family: inherit; font-weight: 600;
						color: inherit; text-decoration: none;
						display: flex; flex-direction: row; flex-wrap:nowrap; align-items: center; justify-content: flex-start;
						column-gap: 0.25em; pointer-events: all;
						& i {
							width: 1em; height:1em; line-height: 1em;
							& svg {
								width: 100%; height: 100%; vertical-align: bottom;
							}
						}
						& span {}
					}
				}
			}
			& button {
				display: none; font-size: inherit; font-family: inherit; pointer-events: all;
				background-color: transparent; color:#fff; border:none; margin:0; padding: 0;
				&:hover {
					cursor: pointer;
				}
			}
			&.is-collapsible {
				& > button { display: block; position: relative; z-index: 1; padding:1em;}
				& > ul {
					position: absolute; z-index: 0;           /* take out of flow so header height doesn't grow */
					flex-direction: column; align-items: flex-start;
					padding:2em 1em 2em 1em; background-color: #fff; color:#000; border-radius:1em;
					opacity: 0; row-gap: 1em; min-width: min(320px, calc(100vw - 2em));
					& > li {
						& a { font-size: 1.4em; pointer-events: none; }
					}
				}
				&.is-open {
					& > ul { 
						display: flex; opacity: 1; pointer-events: all;
						& > li {
							& > a {
								pointer-events: all; 
							}
						}
					}
				}
			}
		}
		& > a.logo {
			font-family: 'Epicene Text', sans-serif;
			font-size: 3em; font-weight:500;
			text-decoration: none; color: inherit;
			pointer-events: all; white-space: nowrap;
			& b { font-weight: 900;}
		}
			
	}	  
}
body > main {
	& h1, .-h1, h2, .-h2 , h3, .-h3 {
	  font-family: 'Epicene Text', sans-serif;
	  font-size: 3em; font-weight:500; line-height: 1.1em;
	  text-decoration: none; color: inherit; 
	  margin: 0; margin-bottom: 0.4em;
	  & b { font-weight: 900;}
	  &:where(h1) { font-size: 3em;}
	  &:where(h2) { font-size: 2.2em;}
	  &:where(h3) { font-size: 1.8em;}
	  &:where(h4) { font-size: 1.4em;}
	  &:where(h5) { font-size: 1.2em;}
	  &:where(h6) { font-size: 1.0em;}
	  &:where(.-h1) { font-size: 3em;}
	  &:where(.-h2) { font-size: 2.2em;}
	  &:where(.-h3) { font-size: 1.8em;}
	  &:where(.-h4) { font-size: 1.4em;}
	  &:where(.-h5) { font-size: 1.2em;}
	  &:where(.-h6) { font-size: 1.0em;}
  	}
	& p {
		font-size: 1em;
		& b { font-weight: 500; }
		& strong { font-weight: 700; }
		&.font-size-medium { font-size: 1.2em;}
		&.font-size-large { font-size: 1.4em;}
	}
	& u.wave-mask{
		text-decoration: none;
		position: relative;
		
		/* your SVG tile (60×10) */
		-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='10' viewBox='0 0 60 10'><path d='M0,3c5,0,5,4,9.99,4s5-4,10-4,5,4,10,4,5-4,10-4,5,4,10,4,5-4,10-4' fill='none' stroke='black' stroke-width='5' stroke-linecap='square' /></svg>");
				mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='10' viewBox='0 0 60 10'><path d='M0,3c5,0,5,4,9.99,4s5-4,10-4,5,4,10,4,5-4,10-4,5,4,10,4,5-4,10-4' fill='none' stroke='black' stroke-width='5' stroke-linecap='square' /></svg>");
		-webkit-mask-repeat: repeat-x;
				mask-repeat: repeat-x;
		
		/* underline height + tile width computed from aspect ratio (60/10 = 6) */
		--underline-h: 1.1em;
		--wave-aspect: 6;                           /* viewBox width / height */
		--wave-tile-w: calc(var(--underline-h) * var(--wave-aspect));
		
		/* use explicit width so we know the exact travel distance */
		-webkit-mask-size: var(--wave-tile-w) var(--underline-h);
			mask-size: var(--wave-tile-w) var(--underline-h);
		
		/* optional: anchor the mask to the bottom edge */
		-webkit-mask-position: 0 100%;
			mask-position: 0 100%;
		
		animation: wave-mask var(--wave-speed, 3.4s) linear infinite;
		will-change: -webkit-mask-position, mask-position;
	}
	& nav {
		& ul {
			list-style: none; padding:0; margin: 0;
			display: flex; flex-direction: row; flex-wrap: wrap;
			align-items: center; justify-content: flex-start; column-gap: 1em; row-gap: 1em;
			& li {
				& a {
					display: inline-flex; flex-direction: row; flex-wrap: nowrap;
					align-items: center; justify-content: flex-start; column-gap: 0.5em;
					padding:1em 2em; background-color: var(--color-text,#fff); color: var(--color-bg,#000);
					border-radius:3em; text-decoration: none; font-weight: 600;
					pointer-events: all;
					& > span {}
					& > i {
						width: 1.4em; height:1.4em; line-height: 1em;
						& > svg {
							width:100%; height:100%; vertical-align: bottom;
						}
					}
					&.coming-soon {
						background-color: #fdf551; color:rgba(11,12,16,1);
					} 
				}
			}
		}  
	}
	& .align {
		max-width: min( calc(100vw - 2em), 40em); margin-left: auto; margin-right: auto;
	}
	& .align-wide {
		max-width: min( calc(100vw - 2em), 60em); margin-left: auto; margin-right: auto;
	}
	& .align-full {
		max-width: min( calc(100vw - 2em), 80em); margin-left: auto; margin-right: auto;
	}
  
  #hero {
	  & .hero-inner {
		  display: flex; flex-direction: row; flex-wrap: wrap;
		  align-items: center; justify-content: space-between;
		  width:100%; height:100%; column-gap: 2em; row-gap: 2em;
		  padding-top: 8em; padding-bottom: 4em; overflow: hidden;
		  
		  & > header {
			  flex-grow: 1; padding: 1em;
			& h1 {
				max-width: 10em;
			}
		  }
		  & > blockquote {
			  	display: flex; flex-wrap: wrap; flex-direction: row;
				flex-basis: 6em; flex-grow: 1; min-width: 15em;
				column-gap: 2em;
			    background-color: #fdf551; color:#000;
				margin:0; padding:2em 1em; border-radius:1em;
			  
				& figure {
					display:block; margin: 0; padding:0; margin-bottom: 1em;
					& picture {
						display: block; overflow: hidden;
						width: 4em; height:4em; border-radius:50%;
						background-color: #fff;
					}
				}
			  & p {
				  flex-basis: 10em; flex-grow: 1;
				  font-family: 'Epicene Text', sans-serif;
				  font-size: 1.8em; font-weight:900; line-height: 1.1em;
				  text-decoration: none; color: inherit; 
				  margin: 0; margin-bottom: 0.4em;
			  }
			  & cite {
				  flex-basis: 100%;
				  font-style: normal; font-weight: 600;
				  & small {
					  display: block; 
					  font-size: 0.75em; font-weight: 400; line-height: 1.2em;
				  }
				  
			  }
			  & nav {
				  flex-basis:100%; margin-top:1em;
				  & > ul {
					  & > li {
						  & a {
							  padding:0; background: transparent;
							  & span {
								padding:0.75em 1em; border-radius:3em;
								background-color: #0b0c10; color:#fff;
							  }
							  & i {
								  width: unset; height: unset;
								  padding:0.75em; border-radius:3em;
								  background-color: #fff; color:#0b0c10;
							  }
						  }
					  }
				  }
			  }
		  }
	  }
	  & figure[data-cover-media] {
		  /* background-color: #0b0c10;
		  & > video { opacity: 0.9;} */
	  }
	  
  }
  
  #about {
	  padding-top: 6em; padding-bottom: 2em;
	  background-color: #fff;
	  & h2 { padding-right: 2em;}
  }
  
}
@keyframes wave-mask{
  to{
	-webkit-mask-position: calc(-1 * var(--wave-tile-w)) 100%;
			mask-position: calc(-1 * var(--wave-tile-w)) 100%;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  u.wave-mask{ animation: none; }
}

/* Optional: fallback for browsers without mask support */
@supports not (mask-image: url("data:image/svg+xml;utf8,<svg/>")){
  u.wave-mask{
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: currentColor;
	text-decoration-style: wavy; /* if supported; otherwise solid */
  }
}