:root {
	--font: 1.414em;
	--delay: .25s;
	--pad: 5.555;
	--display: block;
	--show-width: 50vw;
	--unique: hsla(54, 80%, 62%, 1.0);
	--conventions: hsla(328, 62%, 71%, 1.0);
	--identity: hsla(194, 73%, 74%, 1.0);
	--nonsense: hsla(88, 53%, 54%, 1.0);
}
@supports (mix-blend-mode: darken) {
	:root {
		--display: grid;
	}
}
@media (max-width: 55em) {
	:root {
		--font: 1em;
		--pad: 2.7775;
	}
}
@media (max-width: 30em) {
	:root {
		--pad: 5.55555;
	}
}
@media print {
	:root {
		--display: block;
		--font: .8em;
	}
}
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}


body {
	--delay: .5s;
	font-family: "Nara Sans 7", sans-serif;
	font-size: var(--font);
	line-height: 1.414;
	color: black;
	line-height: 1.25;
	margin: 0 auto;
	overflow-x: hidden;
	padding: 11.1111vh 0 22.2222vh;
	max-width: 800px;
	box-sizing: border-box;
}
@media (max-width: 63em) {
	body {
		max-width: 100%;
		padding: 11.1111vh 11.1111vw 22.2222vh;
	}
}
@media (max-width: 30em) {
	body {
		padding: 5.5555vh 5.5555vw 11.1111vh;
	}
}
@supports (display: grid) {
	body {
		padding: 0;
		max-width: 100%;
		margin: 0;
	}
}
header {
	display: var(--display);
	background-color: var(--nonsense);
	top: 0;
}
header h1 {
	margin: calc(var(--pad) * 3vh) auto;
	margin: calc(var(--pad) * 1vw) calc(var(--pad) * 1vw) 0;
	font-size: 14.6vw;
	font-style: italic;
	font-weight: normal;
}
header p {
	margin: 0 0 calc(var(--pad) * 1vw) calc(var(--pad) * 1vw);
}
body > section {
	margin-bottom: 11.1111vh;
}
@supports (display: grid) {
	body > section {
		margin-bottom: 0;
	}
}
.started h1 {
	transform: scale(1, 1);
}

p {
	max-width: 30em;
}
h4 {
	margin: 0;
	padding: calc(var(--pad) * .25vh) 0;

}
.content {
	padding: calc(var(--pad) * 1vh) calc(var(--pad) * 1vw) calc(var(--pad) * 2vh);
}
.principles .content {
	padding-bottom: 0;
}

picture {
	width: auto;
	height: auto;
	position: relative;
}
picture img,
.trompe img,
.flipping img,
.end img {
	max-width: 100%;
	width: auto;
	height: auto;
}
picture img,
.flips img,
.end img {
	max-width: 49%;
}
@supports (mix-blend-mode: darken) and (display: grid) {
	picture img,
	.flips img,
	.end img {
		max-width: 100%;
	}
}

video {
	width: 100%;
	height: auto;
	transition: var(--delay);
}
video.playing {
	width: 50vw;
	margin-left: calc(var(--pad) * -1vw);
	border: 1px solid var(--unique);
}
video.pause {
	opacity: .5;
}
figure {
	font-size: 1rem;
	margin: 1em;
	font-style: italic
}
figure img {
	width: 100%;
}
figure img[src*=".svg"] {
	height: 25vw;
}
figcaption p {
	margin-top: .414em;
}
@media print {
	figure {
		font-size: .9em;
		width: 50%;
	}
}
/* showing content based on ratios  */
[class^="ratio"] {
	display: none;
}
[class="ratio-1"] {
	display: inline;
}
@supports (display: grid) {
	@media (min-aspect-ratio: 16/10) {
		[class^="ratio"] {
			display: none;
		}
		[class="ratio-2"] {
			display: inline;
		}
	}
	@media (min-aspect-ratio: 22/10) {
		[class^="ratio"] {
			display: none;
		}
		[class="ratio-3"] {
			display: inline;
		}
	}
}

/* ==================================================

INTRODUCTION

================================================== */

.introduction,
.principles {
	position: relative;
	display: var(--display);;
	grid-template-columns: 50% 50%;
	background: var(--unique);
	z-index: 2;
}
@media (max-width: 30em) {
	.introduction,
	.principles {
		grid-template-columns: 1fr;
	}
}
.introduction .scene-1 {
	position: relative;
	top: 0;
	perspective: 105em;
	margin: 0;
	display: var(--display);
	grid-template-columns: 50% 50%;
	grid-column-start: 1;
	grid-row-start: 1;
	grid-column: 1/3;
	z-index: 2;
}
@supports (mix-blend-mode:darken) and (display: grid) {
	.introduction .scene-1 {
		position: -webkit-sticky;
		position: sticky;
	}
}
@media (max-width: 30em) {
	.introduction .scene-1 {
		position: relative;
	}
}
.scene-1 picture:first-of-type {
	grid-column-start: 1;
	grid-row-start: 1;
	justify-content: flex-end;
}
.scene-1 div:first-of-type {
	font-size: 2em;
	font-style: italic;
}
@supports (mix-blend-mode: darken) {
	.scene-1 div:first-of-type {
		grid-column-start: 2;
		grid-row-start: 1;
		margin: 0;
		font-size: calc(1em + 2vw);
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		font-style: italic;
		background: var(--conventions);
	}
	
	@media (max-width: 30em) {
		.scene-1 div:first-of-type {
			grid-column-start: 1;
			grid-column-end: 3;
			grid-row-start: 2;
			position: relative;
			font-size: 1.414em;
			padding: 2em;
		}
	}
}

.scene-1 picture {
	min-height: 80vh;
}
@media (max-width: 50em) {
	.scene-1 picture {
		min-height: 0vh;
	}
}
@supports (mix-blend-mode:darken) and (display: grid) {
	.scene-1 img {
		position: sticky;
		top: 0;
	}
}


@supports (mix-blend-mode:darken) and (display: grid){
	.scene-1 + div {
		grid-column-start: 1;
		grid-row-start: 1;
		margin: 0 0;
		position: relative;
		z-index: 1;
		align-self: end;
		padding-top: 50vw;
	}
	@media (min-aspect-ratio: 1/1) {
		.scene-1 + div {
			padding-top: 25vw;
		}
	}
	@media (max-width: 30em) {
		.scene-1 + div {
			grid-row-start: 2;
			padding-top: 0;
		}
	}

	.scene-1 ~ img {
		position: relative;
		z-index: 3;
	}
	/* rotating images */
	.scene-1 picture {
		position: relative;
		top: 0;
		grid-column-start: 1;
		grid-row-start: 1;
		height: auto;
		width: auto;
		max-width: 100%;
		transform-style: preserve-3d;
		display: flex;
		align-items: flex-start
	}
	@supports (mix-blend-mode:darken) and (display: grid) {
		.scene-1 picture {
			position: -webkit-sticky;
			position: sticky;
		}
	}
	@media (max-width: 30em) {
		.scene-1 picture {
			position: relative;
		}
	}
	.scene-1 picture + picture {
		grid-column-start: 2;
	}
	@media (min-width: 30em) {
		.scene-1 picture:first-of-type {
			transform-origin: 100% 0;
			animation: stuiter1 calc(var(--delay) * 2) calc(var(--delay) * 3) cubic-bezier(1,0,.75,1.11) both;
		}

		.started .scene-1 picture:first-of-type {
			animation: stuiterterug1 calc(var(--delay) * 3)  cubic-bezier(.25,.01,0,1) forwards;
		}
		.scene-1 picture + picture {
			transform-origin: 0 0;
			transform: rotateY(-90deg);
			animation: stuiterterug calc(var(--delay) * 3) cubic-bezier(.25,.01,0,1) forwards;
		}
		

		.started .scene-1 picture + picture {
			animation: stuiter calc(var(--delay) * 2) calc(var(--delay) * 3) cubic-bezier(1,0,.75,1.11) forwards;
		}
	}
}
@keyframes stuiter {
	0% {
		transform: rotateY(-90deg);
	}
	80% {
		transform: rotateY(-9deg);
	}
	93% {
		transform: rotateY(-14deg);
	}
	100% {
		transform: rotateY(-9deg);
	}
}
@keyframes stuiterterug {
	0% {
		transform: rotateY(-9deg);
	}
	100% {
		transform: rotateY(-90deg);
	}
}
@keyframes stuiter1 {
	0% {
		transform: rotateY(90deg);
	}
	80% {
		transform: rotateY(9deg);
	}
	93% {
		transform: rotateY(14deg);
	}
	100% {
		transform: rotateY(9deg);
	}
}
@keyframes stuiterterug1 {
	0% {
		transform: rotateY(9deg);
	}
	100% {
		transform: rotateY(90deg);
	}
}

.introduction + div {
	height: 50vh;
	position: relative;
	z-index: 2;
}
.introduction + img {
	max-height: 90vh;
	width: 100%;
	height: auto;
	object-fit: cover;
	position: relative;
	z-index: 1;
}

@media print {
	header {
		page-break-after: always;
	}
	.scene-1 picture {
		min-height: 0;
		width: 45%;
		float: left;
		position: relative;
		transform: rotateY(0deg) !important;
	}
}


.trompe {
	display: var(--display);
	grid-template-columns: 50% 50%;
	background: var(--identity);
	position: relative;
}
@media (max-width: 30em) {
	.trompe {
		display: block;
	}
}
.trompe.started {
	
}
.trompe img:only-of-type {
	transition: transform var(--delay) cubic-bezier(0.95, 0.05, 0.795, 0.035);
	margin: 0em;
	position: relative;
	margin: 2.8vw 0 0.7vw;
	margin: 0 0 3.5vw 0;
	transform-origin: 100% 0%;
}
@supports (mix-blend-mode:darken) and (display: grid) {
	.trompe img:only-of-type {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
	}
}
@media (max-width: 30em) {
	.trompe img:only-of-type {
		position: relative;
	}
}
.started.trompe img:only-of-type {
	transform: rotate(-4deg);
	transition: transform calc(var(--delay) * 20) ease-in-out;
}
@media (max-width: 30em) {
	.trompe img:only-of-type {
		transform-origin: 20% 0%;
		width: calc(100% - 5.6vw);
		margin: 5.6vw 0 0.7vw;
	}
	.started.trompe img:only-of-type {
		
	}
}
.principles + .trompe {
	z-index: 2;
}
.trompe .alla {
	background: var(--unique);
}
.alla + .content {
	background: var(--conventions);
}
.alla + .content {
	margin-top: 20vw;
}
@supports (mix-blend-mode:darken) and (display: grid) {
	.alla + .content {
		margin-top: 0;
	}
}

.scene-2 {
	z-index: 3;
	display: var(--display);
	grid-template-columns: 50% 50%;
	background: var(--identity);
	position: relative;
	top: 0;
}

.flips {
	position: relative;
	top: 0;
	grid-column: 1/3;
	display: var(--display);
	grid-template-columns: 50% 50%;
	grid-row-start: 1;
	z-index: 2;
}

/* flipping flips
These go in reversed direction
*/
@supports (mix-blend-mode:darken) and (display: grid){
	.flips .content {
		margin: 0;
		font-size: calc(1em + 2vw);
		font-style: italic;
		background: var(--nonsense);
		min-height: 100vh;
		grid-column-start: 2;
		grid-row-start: 1;
	}
	@media (max-width: 30em) {
		.flips .content {
			min-height: 0;
			grid-column-start: 1;
			grid-column-end: 3;
			padding: 2em;
			text-align: center
		}
	}
	.flips img {
		transform-origin: 100% 0;
		transition: calc(var(--delay) * 2) cubic-bezier(0.77, 0, 0.175, 1);
		width: 100%;
		top: 0;
		z-index: 3;
	}
	.flips > div {
		overflow: hidden;
		grid-column-start: 1;
		grid-row-start: 1;
	}
	.started .flips img {
		transform: rotate(-90deg);
	}
	@media (max-width:30em) {
		.started .flips img {
			transform: rotate(0deg);
		}
	}
	
	
	
	.flips > div:nth-of-type(2) {
		position: relative;
		height: 100%;
		overflow: visible;
		z-index: 2;
		opacity: 0;
		transition: 0s calc(var(--delay) * 2);
	}
	.started .flips > div:nth-of-type(2) {
		opacity: 1;
		transition: 0s;
	}
	@supports (mix-blend-mode:darken) and (display: grid) {
		.flips > div:nth-of-type(2) img {
			position: -webkit-sticky;
			position: sticky;
			top: 0;
		}
	}
	.flips div + div {
		grid-column-start: 2;
		grid-row-start: 1;
	}
	@media (max-width: 30em) {
		.flips > div,
		.flips div + div {
			grid-row-start: 2;
		}
	}
	.flips div + div img {
		transform-origin: 0 0;
		transform: rotate(90deg);
		max-height: 100vh;
		object-fit: cover;
		object-position: 0 0;
	}
	@media (min-width: 30em) {
		.started .flips div + div img {
			transform: rotate(0deg);
		}
	}
	@media (max-width: 30em) {
		.flips div + div img,
		.flips > div:nth-of-type(2) {
			opacity: 1;
			transform: rotate(0deg);
		}
	}

	.scene-2 .flips + .content {
		grid-column-start: 1;
		grid-row-start: 1;
		margin: 0 0;
		padding-top: 50vw;
		position: relative;
		z-index: 1;
		align-self: end;
		opacity: 1;
	}
	.started.scene-2 .flips + .content {
		z-index: 2;
		transition: z-index 0s var(--delay);
	}
	@media (min-aspect-ratio:1/1) {
		.scene-2 .flips + .content {
			padding-top: 25vw;
		}
	}
	@media (max-width: 30em) {
		.scene-2 .flips + .content {
			opacity: 1;
			padding-top: calc(var(--pad) * 1vh);
			grid-row-start: 2;
			grid-column-end: 3;
		}
	}
}

@media print {
	.flips div {
		min-height: 0;
		width: 50%;
		float: left;
		position: relative;
		transform: rotateY(0deg) !important;
		opacity: 1 !important;
	}
	.flips div img {
		transform: rotateY(0deg) !important;
	}
	.flips .content {
		display: none;
	}
}



.alla {
	position: relative;
}

.alla div {
	height: 400px;
}
.alla img {
	position: absolute;
}
.alla img:nth-of-type(2) {
	z-index: 1;
}
.started .alla img:nth-of-type(1) {
	z-index: 2;
}
@supports (mix-blend-mode:darken) and (display: grid) {
	.alla div {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		transform-style: preserve-3d;
		perspective: 90em;
		height: 50vw;
		background: white;
	}
	@media (max-width: 30em) {
		.alla div {
			height: 100vw;
		}
	}
	.alla img {
		width: 100%;
		height: auto;
		position: absolute;
		transform: rotateX(0deg);
		transition: transform var(--delay) ease-out,
					opacity 0s;
		transform-origin: 100% 88%;
		opacity: 1;
		z-index: 1;
	}
	.alla img:last-of-type {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		mix-blend-mode: darken;
		z-index: 3;
	}
	.started .alla img:nth-of-type(2) {
		transform: rotateX(-90deg) rotateY(-3deg);
		opacity: 0;
		z-index: 2;
		transition: transform var(--delay) ease-out,
					opacity 0s var(--delay);
	}
}

@media print {

	.alla img {
		width: 50%;
		mix-blend-mode: normal !important;
	}
	.alla img:nth-of-type(2) {
		display: none !important;
	}
	.alla img:nth-of-type(1),
	.started .alla img:nth-of-type(1) {
		opacity: 1;
		position: absolute;
		top: 0;
		z-index: 4;
	}
	.alla + .content {
		margin-top: 0;
	}
	.alla div {
		height: 45%;
	}
}

.in-ex div div {
	background: white;
}
.in-ex ul {
	font-style: italic;
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
	text-align: right;
	font-size: 2em;
}
@supports (display: grid) {
	.in-ex ul {
		width: var(--show-width);
	}
}

@media (max-width: 64em) {
	.in-ex ul {
		font-size: 1.6em;
	}
}
@media (max-width: 42em) {
	.in-ex ul {
		font-size: 1.414em;
	}
}
@media (max-width: 30em) {
	.in-ex ul {
		font-size: 1em;
	}
}
@media (max-width: 21em) {
	.in-ex ul {
		font-size: .9em;
	}
}
.inclusive-principles:first-of-type li::after {
	content: "→";
	margin-left: .15em;
	opacity: 0;
	transition: 0s calc(var(--delay) / 3);
}
.started .inclusive-principles:first-of-type li::after {
	opacity: 1;
	transition: 0s var(--delay);
}
.inclusive-principles li {
	padding: .414em .8em;
}
.inclusive-principles:first-of-type li {
	padding: .414em 0 .414em .8em;
}
.inclusive-principles li:last-child {
	border: none;
}
.inclusive-principles span {
	background: var(--unique);
	padding: 0 .414em;
	margin-right: -.414em;
}
.inclusive-principles li:nth-of-type(2) span {
	background: var(--conventions);
}
.inclusive-principles li:nth-of-type(3) span {
	background: var(--identity);
}
.inclusive-principles li:nth-of-type(4) span {
	background: var(--nonsense);
}
.exclusive-principles ul {
	text-align: left;
	
}
.exclusive-principles li {
	padding: .414em .8em; 
	position: relative;
	z-index: 0;
}
.exclusive-principles li span::before{
	content: '';
	z-index: -1;
	position: absolute;
	width: 90%;
	height: 1em;
	background: var(--unique);
	left: -.51em;
}
.principles .started:nth-of-type(1) > h4,
#unique {
	background: var(--unique);
}
.exclusive-principles li:nth-child(2) span::before,
.principles .started:nth-of-type(2) > h4,
#inconsistency {
	background: var(--conventions);
}
.exclusive-principles li:nth-child(3) span::before,
.principles .started:nth-of-type(3) > h4,
#identity {
	background: var(--identity);
}
.exclusive-principles li:nth-child(4) span::before,
.principles .started:nth-of-type(4) > h4,
#nonsense {
	background: var(--nonsense);
}
.exclusive-principles span {
	position: relative;
}
.exclusive-principles[class*="p-"] li {
	filter: grayscale(1);
}
.exclusive-principles.p-1 li:first-child,
.exclusive-principles.p-2 li:nth-child(2),
.exclusive-principles.p-3 li:nth-child(3),
.exclusive-principles.p-4 li:nth-child(4) {
	filter: grayscale(0);
}

#flippingprinciples ~ section {
	margin: 0 calc(var(--pad) * -1vw);
	padding: calc(var(--pad) * .5vw) calc(var(--pad) * 1vw);
}

.principles {
	background: white;
}
@supports (mix-blend-mode:darken) and (display: grid) {
	.principles .in-ex {
		grid-column: 1/3;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
	}
}
.in-ex div {
	display: var(--display);
	grid-template-columns: 50% 50%;
	z-index: 2;
	position: relative;
	transform-style: preserve-3d;
	perspective: 105em;
	background: white;
}
/* .in-ex div::before {
	content: '';
	width: var(--show-width);
	height: 100vh;
	background: black;
	position: absolute;
	right: 0;
	z-index: -1;
} */
.in-ex div div {
	width: 49%;
	display: inline-block;
	vertical-align: middle;
	background: transparent;

}
@supports (mix-blend-mode:darken) and (display: grid) {
	.in-ex div div {
		width: 100%;
		object-fit: cover;
		object-position: 100% 0;
		position: relative;
		z-index: 2;
		transform-origin: 100% 100%;
		transition: transform calc(var(--delay) * 2) ease-in-out;
	}
}
.in-ex div div:first-of-type {
	justify-self: end;
	grid-column-start: 1;
	grid-row-start: 1;
}
.in-ex div div:nth-last-of-type(2) {
	display: none;
}
@supports (mix-blend-mode:darken) and (display: grid) {
	.in-ex div div:nth-last-of-type(2) {
		display: block;
		grid-column-start: 1;
		grid-row-start: 1;
		transition: transform var(--delay) ease-in;
	}


	.principles.started  div div:nth-of-type(2) {
		transform: rotateY(90deg);
	}
	.in-ex div div:nth-of-type(3) {
		grid-column-start: 2;
		grid-row-start: 1;
		object-position: 0 0;
		opacity: 0;
		transform-origin: 0 0;
		transform: rotateY(-90deg);
		transition: transform var(--delay) var(--delay) ease-out;
	}
	.principles.started .in-ex div div:nth-of-type(3) {
		opacity: 1;
		transform: rotateY(0deg);
	}
}
.in-ex + .content {
	grid-row-start: 2;
	z-index: 2;
	background: white;
}

.principles .started > h4 {
	top: 0;
	background-color: inherit;
}

@media print {
	.in-ex div div:nth-last-of-type(2) {
		display: none;
	}
	.in-ex ul {
		width: 100%;
	}
	.in-ex div div {
		width: 49% !important;
		display: inline-block;
		vertical-align: middle;
		background: transparent;
		transform: rotateY(0deg) !important;
		opacity: 1 !important;
	}
	.inclusive-principles:first-of-type li::after {
		opacity: 1;
	}
	video {
		width: 50%;
	}
	video + p::before {
		content: 'Watch the video at https://vvg.gr/qq';
		display: block;
		margin: -1em 0 1em;
		font-size: .9em;
		font-style: italic;
	}
}


@supports (mix-blend-mode:darken) and (display: grid) {
	.end {
		background-color: var(--unique);
	}
	.end .content {
		background-color: var(--identity)
	}
	.end div:first-of-type {
		display: var(--display);
		transform-style: preserve-3d;
		perspective: 90vw;
		
	}
	.end img {
		width: 50vw;
		height: auto;
		opacity: 1;
		grid-row-start: 1;
		grid-column-start: 1;
		transition: opacity 0s calc(var(--delay) * 3);
		animation: trompe1 calc(var(--delay) * 2) calc(var(--delay) * 3) cubic-bezier(1,0,.75,1.11) both;
	}
	@media (max-width: 30em) {
		.end div:first-of-type {
			perspective: 130vw;
		}
		.end img {
			width: 100%;
		}
	}
	.end img:last-child {
		opacity: 0;
		transform: rotateY(-90deg);
		animation: trompeterug calc(var(--delay) * 3) cubic-bezier(.25,.01,0,1) forwards;
	}
	.end.started img {
		opacity: 0;
		animation: trompeterug1 calc(var(--delay) * 3)  cubic-bezier(.25,.01,0,1) forwards;
	}
	.end.started img:last-child {
		opacity: 1;
		animation: trompe calc(var(--delay) * 2) calc(var(--delay) * 3) cubic-bezier(1,0,.75,1.11) forwards;
	}
}

@keyframes trompe {
	0% {
		transform: rotateY(-90deg);
		transform-origin: 50% 0;
	}
	80% {
		transform: rotateY(-1deg);
		transform-origin: 0 0;
	}
	93% {
		transform: rotateY(-5deg);
	}
	100% {
		transform: rotateY(-1deg);
	}
}
@keyframes trompeterug {
	0% {
		transform: rotateY(-1deg);
		transform-origin: 100% 0;
	}
	100% {
		transform: rotateY(-90deg);
		transform-origin: 50% 0;
	}
}
@keyframes trompe1 {
	0% {
		transform: rotateY(90deg);
		transform-origin: 50% 0;
	}
	80% {
		transform: rotateY(1deg);
		transform-origin: 100% 0;
	}
	93% {
		transform: rotateY(5deg);
	}
	100% {
		transform: rotateY(1deg);
	}
}
@keyframes trompeterug1 {
	0% {
		transform: rotateY(1deg);
		transform-origin: 0 0;
	}
	100% {
		transform: rotateY(90deg);
		transform-origin: 50% 0;
	}
}

@media print {
	.end {
		page-break-before: always;
	}
	.end img {
		float: left;
		width: 50% !important;
		transform: none !important;
		animation: none !important;
		opacity: 1 !important;
	}
	.end img:last-of-type {
		margin: 0 0 1em;
	}
	.end .content {
		clear: both;
	}
}




.footnotes {
	padding: calc(var(--pad) * 1vh) calc(var(--pad) * 1vw) calc(var(--pad) * 2vh);
	background: var(--conventions);
	min-height: 100vh;
	position: relative;
}
.footnotes h2 {
	margin: 0;
	font-size: 1.414em;
	
}

.footnote {
	font-feature-settings: "subs" 1;
	font-variant-position: super;
}
.notes,
.footnotes {
	font-size: .85em;
}
.footnotes ol {
	margin: 0;
	padding: 0;
}
@media (max-width: 30em) {
	.footnotes ol {
		margin-left: 1em;
	}
}
.footnotes p {
	margin: 0;
}
.footnotes p + p {
	text-indent: 1em;
}
[href^="#note"],
[href^="#fn"] {
	color: inherit;
	border-bottom: 1px dotted black;
	text-decoration: none;
}
[href^="#note"]::after,
[href^="#fn"][href$="n"]::after {
	content: 'ℹ';
	display: inline-block;
	text-decoration: none !important;
	margin-left: .1em;
	font-size: 1em;
	line-height: 1;
	transition: .2s;
}
[href^="#fn"][href$="1n"]::after {
	content: "\00B9";
}
[href^="#fn"][href$="2n"]::after {
	content: "\00B2";
}
[href^="#fn"][href$="3n"]::after {
	content: "\00B3";
}
[href^="#fn"][href$="4n"]::after {
	content: "\2074";
}
[href^="#fn"][href$="5n"]::after {
	content: "\2075";
}
[href^="#fn"][href$="6n"]::after {
	content: "\2076";
}
[href^="#fn"][href$="7n"]::after {
	content: "\2077";
}
[href^="#fn"][href$="8n"]::after {
	content: "\2078";
}
[href^="#fn"][href$="9n"]::after {
	content: "\2079";
}
[id^="note"],
[id^="fn:"][id$="n"] {
	display: inline-block;
	overflow: hidden;
	font-style: italic;
	width: 0;
	height: 0;
	box-sizing: border-box;
	transition: 0s;
	transform: rotateX(90deg);
}
[id^="note"]:target,
[id^="note"].is-open,
[id^="fn:"][id$="n"]:target,
[id^="fn:"][id$="n"].is-open {
	display: block;
	width: 100%;
	height: auto;
	padding: 2em;
	transform: rotateX(0deg);
	transition: transform var(--delay),
				padding-top var(--delay),
				padding-bottom var(--delay);
}
[id^="fn:"][id$="n"] .reversefootnote {
	font-style: normal;
}
[id^="fn"]{
	margin-top: 0 !important;
}
[href="#flip"] {
	position: absolute;
	bottom: 1em;
	color: white;
}
@supports(color: var(--conventions)){
	[href="#flip"] {
		color: var(--conventions);
	}
}
[href="#flip"]:hover,
[href="#flip"]:focus {
	filter: brightness(0.9);
}
[href="#flip"]:active {
	color: red;
}
[href="#flip"]:active::after {
	content: "! uh oh!";
}
html:target * {
	transition: var(--delay) cubic-bezier(1, 0, 0, 1);
	transform: rotate(90deg);
	mix-blend-mode: darken;
}
@media print {
	.footnotes {
		min-height: auto;
		page-break-before: always;
	}
	[href^="#note"],
	[href^="#fn"] {
		border-bottom: 0;
	}
	a[href^="http"] {
		color: black;
		border-bottom: .5px dotted black;
		text-decoration: none;
	}
	a[data-short]::after {
		content: " [https://" attr(data-short) "]"
	}
	[href="#flip"] {
		display: none;
	}
}