:root {
	--fontsize: 16px; /* 13pt */
	--buttonfontsize: 18px;
	--gap: 24px; /* 1.5rem */
	--pd-dark-grey: #111111;
	--pd-white: #F7F7F7;
	--pd-dark-green: #323d3c;
	--pd-red: #630000;
	--pd-grey: #637074;
	--width: 1600px;
	--grid-column: 5;
}
html {
	scroll-behavior: smooth;
	font-size: var(--fontsize);
}
* {
	box-sizing: border-box;
}
@media (max-width: 999px) {
	:root {
		--fontsize: 15.5px; /* 13pt */
		--buttonfontsize: 16px;
		--gap: 1.5rem; /* 1.5rem */
	}
}

@media (max-width: 799px) {
	:root {
		--fontsize: 14px; /* 10.5pt */
		--buttonfontsize: 15px;
		--gap: 1rem; /* 1rem */
		--grid-column: 2;
	}
}

body {
	/* font-family: transducer-variable, sans-serif; */
	color: var(--pd-white);
	background: var(--pd-dark-grey);
	transition: 0.5s ease-in-out;
	overflow-x: hidden;
	max-width: 100%;
	width: 100vw;
	overscroll-behavior: none;
    margin: 0;
	font-size: var(--fontsize);
	font: var(--fontsize) / 160% "transducer-variable", sans-serif;
	letter-spacing: .125em;
	line-height: 1.4;
}
h1, .h1 {
	font-size: 2.5rem;
	font-variation-settings: "slnt" 0, "wdth" 200, "wght" 600;
	text-transform: uppercase;
	line-height: 1.2;
	text-wrap: balance;
}
h2, .h2 {
	font-size: 2rem;
	font-variation-settings: "slnt" 0, "wdth" 200, "wght" 400;
}
h3, .h3 {
	font-size: 1.5rem;
	font-variation-settings: "slnt" 0, "wdth" 200, "wght" 600;
	text-transform: uppercase;
}
h4, .h4 {
	font-size: 1.125rem;
}
h5, .h5 {
	font-size: 1rem;
	font-family: "hhAgendaBold", sans-serif;
	font-weight: normal;
}
p, .p {
	font-size: 1rem;
	font-variation-settings: "slnt" 0, "wdth" 200, "wght" 400;
	line-height: 1.7;
}
small, .Small {
	font-size: 0.875rem;
}
.Center {
	text-align: center;
}
.credit {
	font-family: transducer-variable, sans-serif;
}
.credit a {
	color: var(--pd-dark-grey);
}

#SelectedWork {
	height: 100vh;
	overflow: hidden;
	display: flex;
	left: 0;
	background: var(--pd-dark-grey);
	color: var(--pd-white);
}

.WorkWrapper {
	height: 100vh;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: calc(var(--gap) * 2) 10vw;
	gap: 6vw;
}
.WorkWrapper > aside {
	width: 60vw;
}
.WorkWrapper > figure {
	display: grid;
	grid-template-columns: 0.5fr 1fr;
	max-height: 80vh;
	height: 100%;
	min-width: 65vw;
	margin: 0;
}
.WorkWrapper > figure > img {
	width: 100%;
	height: 100%;
	max-height: 78vh;
	object-fit: contain;
	background: center / cover no-repeat url("../img/pd-texture-bg.webp") fixed;
	border: 0;
	aspect-ratio: 1/1;
}
.WorkWrapper > figure > figcaption {
	display: flex;
	flex-direction: column;
	gap:calc(var(--gap) / 2);
	/* background: var(--pd-white); */
	background: var(--pd-dark-green);
	color: var(--pd-dark-grey);
	height: fit-content;
	padding: var(--gap) calc(var(--gap) * 1.5);
	margin-top: var(--gap);
	margin-right: calc(var(--gap) * -1);
	z-index: +1;
}
.WorkWrapper > figure > figcaption > * {
	margin: 0;
}