:root {
	--geel: #FFF021;
	--hover: red;
	--white: white;
	--zwart: black;
	--page-margin: 5.555;
	--page-background: var(--white);
	--border-width: calc( .3vw + .3vh);
	--border: var(--border-width) solid var(--zwart);
  --magic-height: calc(93vh - 18vh);
}

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

html {
	font-family: 'Open Sans', sans-serif;
	scroll-behavior: smooth;
	line-height: 1.618;
}
body {
	margin: 0;
	padding: 0;
	background: var(--page-background);
}


h1, h2, h3, h4, h5 {
	font-weight: normal;
	text-wrap: balance;
}
h1 {
	font-size: 3.99758436em;
	font-size: clamp(1em, 5.4vh, 3.99758436em);
	rotate: 180deg;
	position: fixed;
	line-height: 1;
	border: var(--border);
	display: inline-block;
	padding: 1.8em .4em .4em;
	margin: calc( var(--page-margin) * 1vh) calc( var(--page-margin) * .5vw);
	writing-mode: vertical-rl;
	z-index: 4;
	height: 90vh;
	text-align: right;
  background: var(--white);
}
h1:before {
	content: '';
	position: absolute;
	background-image: url(gfx/directions.svg);
	width: 1.8em;
	height: 1.9em;
	background-size: 1.8em 1.9em;
	rotate: 180deg;
	top: 0;
}
a:hover {
	color: var(--hover);
}
a:focus {
	outline: 2px dotted var(--hover);
}
:where(section, aside) a[href]::after {
	background-image: url('gfx/intern.svg');
	content: '';
	display: inline-block;
	height: 1em;
	margin-left: .2em;
	aspect-ratio: 1;
	translate: 0 0.2em;
}
:where(section, aside) a[href^="https://"]::after {
	background-image: url('gfx/rocket.svg');
}
:where(section, aside) a[href$=".pdf"]::after {
	background-image: url('gfx/document.svg');
}
:where(section, aside) a[href^="https://dlo.mijnhva.nl/"]::after {
	background-image: url('gfx/closed.svg');
	aspect-ratio: 164/229;
	translate: 0 0.1em;
}


q {
	font-style: italic;
}

main {
	padding-left: max( 8em, calc( var(--page-margin) * 3vw ));
	display: flex;
	flex-direction: column;
	align-items: start;
	position: relative;
  
}
@media (max-width: 35em) {
	h1 {
		position: absolute;
		writing-mode: unset;
		rotate: 0deg;
		font-size: clamp(1em, 5.3vw, 3.99758436em);
		height: auto;
		padding: .4em 1.8em .4em .4em;
	}
	h1:before {
		top: auto;
		right: -.2em;
		bottom: 0;
		rotate: 0deg;
	}
	main{
 	  padding: 0 calc( var(--page-margin) * 1vw ); 
	}
}

main > p:first-child {
	margin: 0;
	font-style: italic;
	font-size: clamp(1.414em, 4.6vw, 2.99em);
	line-height: 1.6;
	position: absolute;
	z-index: 3;
	background: var(--white);
	box-shadow: -10vw 0 0 var(--white),
		30em 0 0 var(--white);
	
  left: 0;
  padding-left: max( 8rem, calc( var(--page-margin) * 3vw ));
  padding-right: calc( var(--page-margin) * 1vw );
  width: 100vw;
  height: var(--magic-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 35em) {
  main > p:first-child {
    padding-left: calc( var(--page-margin) * 1vw );
  }
}
main > p:first-child a {
	color: inherit;
	line-height: 1;
	text-decoration-thickness: .05em;
	display: inline-block;
}
main > p:first-child a:hover,
main > p:first-child a[href="#kritische-ontwerpers"]:hover ~ 
a[href="#kritische-ontwerpers"],
main > p:first-child:has(a[href="#kritische-ontwerpers"]:hover) a[href="#kritische-ontwerpers"] {
	background: var(--geel);
	color: var(--zwart);
	outline: var(--border);
	outline-offset: 0 .2em;
  text-decoration: none;
}

main > p:first-child a:focus-visible,
main > p:first-child a[href="#kritische-ontwerpers"]:focus-visible ~ 
a[href="#kritische-ontwerpers"],
main > p:first-child:has(a[href="#kritische-ontwerpers"]:focus-visible) a[href="#kritische-ontwerpers"] {
	background: var(--geel);
	color: var(--zwart);
	outline: 2px dashed var(--zwart);
}

main iframe {
	max-height: 50dvh;
	max-width: 100%;
	width: 30em;
	aspect-ratio: 1;
	border: 0;
	/display: block;
}

figure {
	margin: 1em 0;
}
figcaption p:first-child {
	margin-top: 0;
}
figcaption span:first-of-type,
figcaption span span {
	display: none;
}

@supports(d: path('M13 13')){
	figcaption span:first-of-type {
		display: inline;
	}
	figcaption span + span {
		display: none;
	}
}

nav {
	font-size: clamp(.85em, 2.3vw, 1.414em);
	position: fixed;
	top: 0;
	padding: calc( var(--page-margin) * 1vh) 1em 1em;
	margin: 0;
	background: var(--page-background);
	display: flex;
	z-index: 2;
	border-bottom: var(--border);
  left: 0;
  padding-left: max( 8em, calc( var(--page-margin) * 3vw ));
  width: 100vw;
  box-sizing: border-box;
}
nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 1em;
}
@media (max-width: 35em) {
  nav {
    padding: .5em;
    font-size: clamp(.7em, 2.9vw, 1.414em);
  }
  nav ul {
    gap: .5em;
  }
}

nav a {
	color: inherit;
	line-height: 1;
	border: var(--border);
	padding: .4em;
	display: block;
	text-decoration: none;
}

nav a[href="#kritische-ontwerpers"]:hover::before {
	content: "voor een complexe samenleving";
	position: absolute;
	border: var(--border);
	padding: .4em;
	margin-top: 1.4em;
	background: var(--zwart);
	color: var(--white);
}

nav li { --rotate: 1deg;}
nav li:nth-of-type(2) { 
	--rotate: none;
}
nav li:nth-of-type(2) a {
	rotate: -1deg;
}

nav li a:hover,
.kritische-ontwerpers nav a[href="#kritische-ontwerpers"],
.cmd-amsterdam nav a[href="#cmd-amsterdam"],
.digitale-producten nav a[href="#digitale-producten"] {
	background: var(--geel);
	color: var(--zwart);
	rotate: var(--rotate);
}

nav a:focus-visible,
nav a[href="#kritische-ontwerpers"]:focus-visible ~ 
a[href="#kritische-ontwerpers"],
nav:has(a[href="#kritische-ontwerpers"]:focus-visible) a[href="#kritische-ontwerpers"] {
	background: var(--geel);
	color: var(--zwart);
	outline: 2px dashed var(--zwart);
}

section {
	scroll-margin-top: 20vh;
	margin: 0 0 calc(var(--page-margin) * 6vmin);
}

hr {
  margin-top: 0;
  margin-bottom: 18vh;
  margin-left: min( -8em, calc( var(--page-margin) * -3vw ));
  border-bottom: var(--border);
  width: 100vw;
}
@media (max-width: 35em) {
  hr {
    margin-left: calc( var(--page-margin) * -1vw );
  }
}

hr:first-of-type {
  margin-top: var(--magic-height);
}


h2 {
	font-size: clamp(2em, 5vw, 2.82714594em);
	line-height: 1.2;
	border: var(--border);
	display: inline-block;
	padding: .2em .4em;
	margin: 0 -.5em 1em;
	background: var(--geel);
	transition: rotate .25s 1s cubic-bezier(.47,.16,1,2);
	width: fit-content;
  position: sticky;
  top: calc(var(--page-margin) * 2.5vh);
  z-index: 1;
}
@media (max-height: 30em) {
    h2 {
      position: static;
    }
}
@media (max-width: 35em) {
  h2 {
    top: calc(var(--page-margin) * 1vh);
  }
}
section:target h2 {
	rotate: -1deg;
}

[id="kritische-ontwerpers"] h2 {
	display: flex;
	flex-direction: column;
	border: none;
	align-items: start;
	padding: 0;
	margin: 0 0 1em;
	background: transparent;
	width: fit-content;
}
h2 span {
 border: var(--border);
 display: inline-block;
 padding: .2em .4em;
 margin: 0 -.5em;
 background: var(--geel);
}
h2 span:nth-of-type(2) {
	margin-top: calc( var(--border-width) * -1 );
	margin-left: .2em;
	background: var(--zwart);
	color: var(--white);
}

h3 {
	font-size: 1.999em
}
h4 {
	font-size: 1.414em;
}
h5 {
	1em;
}
h2 ~ details {
	position: relative;
  max-width: 33em;
}
h2 ~ details:first-of-type {
	margin-top: 2em;
}
h2 ~ details summary {
	font-size: 1.999em;
	border: var(--border);
	position: relative;
	background: white;
	padding: .2em .4em;
	cursor: pointer;
	transition: .25s cubic-bezier(.47,.16,1,2);
	scroll-margin: 30vh;
  list-style: none;
}
h2 ~ details summary::marker {
  display: none;
}
h2 ~ details summary img {
  height: 1em;
  margin-right: .2em;
  rotate: 5deg;
  transition: .3s cubic-bezier(.75,0,.31,.94);
  transform-origin: 100% 0%;
}
details:nth-of-type(2) summary img {
  rotate: -10deg;
}
details[open] summary img {
  rotate: 90deg;
  transform-origin: 50%;
}


h2 ~ details:nth-of-type(1) summary {
	rotate: -3deg;
}
h2 ~ details:nth-of-type(2) summary {
	rotate: 1deg;
}
h2 ~ details:nth-of-type(3) summary {
	rotate: -2deg;
}

h2 ~ details summary:hover,
h2 ~ details summary:focus-visible {
	translate: -.1em -.2em;
}
h2 ~ details summary:focus-visible {
	outline: .2em solid var(--geel);
	outline-offset: .2em;
}
h2 ~ details summary:active {
	translate: .0em .1em;
}
h2 ~ details[open] summary {
	rotate: 0deg;
	translate: 0 0;
}

h2 ~ details summary::before,
h2 ~ details summary::after,
h2 ~ details summary span::before,
h2 ~ details summary span::after {
	content: '';
	position: absolute;
	border: var(--border);
	width: .6em;
	aspect-ratio: 1;
	border-radius: .2em;
	left: -.4em;
	top: -.4em;
	background: white;
}
h2 ~ details summary::after,
h2 ~ details summary span::before {
	left: auto;
	right: -.3em;
}
h2 ~ details summary span::before,
h2 ~ details summary span::after {
	top: auto;
	bottom: -.3em;
}

/*details:not([open]) + details:not([open]) + details:not([open])::after {
  content: '';
  background-image: url("gfx/click.svg");
  position: absolute;
  height: 4em;
  width: 2em;
  background-size: 2em auto;
  background-repeat: no-repeat;
  left: 0;
  bottom: -2.7em;
}
body:has(:focus-visible) details:not([open]) + details:not([open]) + details:not([open])::after {
  background-image: url("gfx/enter.svg");
}*/

p,
li {
	max-width: 30em;
}
ol,
ul {
	padding: 0;
}


.asides {
	background-color: var(--geel);
  border-top: var(--border);
  border-bottom: var(--border);
  padding-left: max( 8em, calc( var(--page-margin) * 3vw ));
  margin-left: min( -8em, calc( var(--page-margin) * -3vw ));
  padding-top: calc( var(--page-margin) * 2vw );
  width: 100vw;
}
aside {
 background: var(--page-background);
	padding: 1em;
	border: var(--border);
	scroll-margin-top: 30vh;
	margin: 0 0 30vh;
  max-width: 33em;
}
aside h2 {
	background-color: var(--white);
	border: var(--border);
	font-size: 2em;
	translate: -1em -1em;
	margin: 0;
}
aside :is(ul, ol) {
	padding: 0 1em;
}

aside iframe {
	width: 100%;
	aspect-ratio: var(--w)/var(--h);
}
iframe[src^="https://player.vimeo.com/"] {
	
}

footer {
	display: flex;
	margin-top: calc( var(--page-margin) * 4vh)
}
footer img {
	max-width: 300px;
	margin-left: auto;
}

@media print {
		body {
			font-size: 10pt;
		}
    main {
      display: block;
    }
		h1 {
      position: absolute;
      writing-mode: unset;
      rotate: 0deg;
      font-size: clamp(1em, 5.3vw, 3.99758436em);
      height: auto;
      padding: .4em 1.8em .4em .4em;
    }
    h1:before {
      top: auto;
      right: -.2em;
      bottom: 0;
      rotate: 0deg;
    }
    nav,
    hr {
      display: none;
    }
    main > p:first-child {
      position: relative;
      height: 90vh;
      page-break-after: always;
      padding: 0;
    }
    section {
      page-break-before: always;
      scroll-margin-top: 0;
      margin: 0;
    }
    details {
      page-break-inside: avoid;
    }
		h2 {
			font-size: 2em;
		}
		h2 ~ details summary {
			font-size: 1.414em;
		}
		p, li {
			max-width: 40em;
		}
		summary + p {
			margin-top: 0;
		}
		section:not(:last-of-type) {
			page-break-after: always;
		}
    .asides {
      background: none;
      border: none;
    }
    aside {
      page-break-before: always;
    }
}


@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(fonts/OpenSans-Bold.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/OpenSans-Regular.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/OpenSans-Italic.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}