:root {
	--headerHue: 54;
	--handHue: 88;
	--borderHue: 194;
	--quoteHue: 328;
	--hueRotation: 51.42857143;
}
* {
	box-sizing: border-box;
}
@page {
	margin: 0;
	margin-top: 2.2222cm;
	margin-bottom: 3.3333cm;
}
body {
	font-family: "Nara Sans 16", Georgia, 'Times New Roman', Times, serif;
	font-size: clamp(1.2em, 4vw,1.414em);
	padding: 11.1111vh 11.1111vw 22.2222vh;
	margin: 0;
	line-height: 1.2;
}

h1 {
	font-family: "Nara Sans 16", Georgia, 'Times New Roman', Times, serif;
	font-weight: 600;
	font-size: clamp(.7em,6.66vw,2.55em);
	position: relative;
	margin: 0 0 1em;
}
h1::before {
	content: "";
	background-color: hsla(var(--headerHue), 80%, 62%, 1.0);
	position: absolute;
	top: -.5em;
	left: -.5em;
	bottom: -.5em;
	right: -.5em;
	z-index: -1;
	transform: rotate(-3deg);
}
h2 {
	font-size: clamp(2em, 6vw, 3em);
	position: relative;
}
h2::before {
	content: '';
	position: absolute;
	top: 0;
	left: -.25em;
	width: 4em;
	height: 1.2em;
	background-color: hsla(var(--borderHue), 80%, 62%, 1.0);
	z-index: -1;
	transform: rotate(1deg);
}
h2:nth-of-type(2n)::before {
	background-color: hsla(var(--handHue), 80%, 62%, 1.0);
	transform: rotate(-1deg);
	width: 5em;
	left: -.45em;
}
h2:nth-of-type(3n)::before {
	background-color: hsla(var(--quoteHue), 80%, 62%, 1.0);
	transform: rotate(1deg);
	width: 6em;
	left: -.15em;
}
h2, h3 {
	page-break-after: avoid;
}
q, del {
	/* font-style: normal; */
}
del {
	text-decoration-style: wavy;
}

article {
	
}

.answer {
	background-image: url(dots.svg);
	background-repeat: repeat;
	background-size: .6em 1.2em;
	transform: rotate(1deg);
}
p, ol {
	margin:0 0 1.2em;
	max-width: 30em;
}
.sig {
	font-style: italic;
}

figure {
	margin: 0 0 1em;
	background-color: white;
	padding: 1em 1em 0;
	overflow: hidden;
	transform: rotate(1deg);
	box-shadow: .2em .2em .2em .2em silver;
	max-width: 30em;
	page-break-inside: avoid;
}
div > figure {
	width: min-content;
	max-width: initial;
}
figure:nth-of-type(2) {
	transform: rotate(-1deg);
}
img {
	max-height: 90vh;
	max-width: calc(78vw - 2em);
	width: auto;
	height: auto;
}
figcaption {
	font-weight: 600;
	font-size: .9em;
}
figcaption em {
	font-weight: 400;
}
blockquote {
	font-size: 2em;
	font-weight: 600;
	margin: .5em 0 1em;
	page-break-inside: avoid;
	page-break-after: avoid;
}
blockquote::before {
	content: '“';
}
blockquote::after {
	content: '”';
}
@media (min-width: 30em) {
	.images {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1em;
	}
	.images figure:first-of-type,
	.images figure:last-of-type {
		grid-column: span 2;
	}
	figure:nth-of-type(2) img,
	figure:nth-of-type(3) img {
		max-width: calc(39vw - 3em);
	}
}
@media print {
	.images {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 1em;
	}
	.images figure:first-of-type img,
	.images figure:last-of-type img {
		grid-column: span 2;
		max-width: calc(45vw - 3em);
	}
}

h2[id="ethical-approaches"] {
	counter-reset: ethics;
}

h2[id="ethical-approaches"] ~ h3 {
	counter-increment: ethics;
}
h2[id="ethical-approaches"] ~ h3::before {
	content: counter(ethics) '. ';
}