.row {
	flex-wrap: nowrap !important;
	column-gap: 32px;
}

article hr {
	margin-top: 0;
}

article h1 {
	font-size: 64px;
	line-height: 1;
	margin: 0;
}

article h2 {
	margin: 8px 0;

	font-size: 28px;
	font-family: "dharma-gothic-e", sans-serif;
	text-transform: uppercase;
}

article h2.subtitle {
	font-family: 'neue-haas-grotesk-display', sans-serif;
	font-weight: 400;
	font-style: italic;
	letter-spacing: 1px;

	margin-top: -2px;
}

article h2.author {
	font-family: 'neue-haas-grotesk-display', sans-serif;
	font-weight: 400;
	letter-spacing: 1px;
	color: var(--red);
}

article figure { margin: 0; }
article figcaption {
	font-weight: bold;
	font-size: 18px;
	transform: scaleX(0.8);
	transform-origin: 0 0;
}

article img {
	width: 100%;
	max-height: 420px;
	object-fit: contain;

	background: linear-gradient(to bottom, var(--grey), var(--light-grey), var(--grey));
}

article h3 {
	margin-bottom: -8px;
	margin-top: 32px;

	font-family: 'neue-haas-grotesk-display', sans-serif;
	font-size: 24px;
	text-transform: uppercase;
}



#issue-nav {
	margin: 0 32px;
}

#issue-nav > .head {
	display: flex;
	flex-flow: row nowrap;
	column-gap: 16px;
	align-items: center;
}

#issue-nav > .head > p {
	font-family: 'neue-haas-grotesk-display', sans-serif;
	font-size: 20px;
	font-weight: bold;
	text-transform: uppercase;

	padding-top: 4px;
	margin-top: 24px;
}

#issue-nav > .head > p:not(:last-child) {
	color: var(--red);

	padding-left: 16px;
	border-left: 2px solid black;
}

#issue-nav > .head > p:last-child {
	font-weight: 400;
	color: black;
}


#issue-nav > .row {
	width: 100%;
	row-gap: 32px;
	flex-wrap: wrap-reverse !important;
	justify-content: center;
}

#issue-nav > .row > *:not(.divider) {
	flex: 1;
	min-width: 510px;
	max-width: 700px;
	height: 150px;
	/*padding: 16px;*/
}

#issue-nav > .row > a {
	display: flex;
	flex-flow: row nowrap;
	column-gap: 16px;

	text-decoration: none;
	color: black;
	transition: background var(--fade-time-fast) ease-out;
}

#issue-nav > .row > a:hover {
	background-color: var(--light-grey);
}

#issue-nav > .row > div {
	display: flex;
	justify-content: center;
	align-items: center;

	border: 2px solid var(--grey);
	color: var(--grey);
	text-transform: uppercase;
}

#issue-nav > .row img {
	width: 250px;
	height: 150px;
	object-fit: cover;
}

#issue-nav > .row h2 {
	font-family: 'dharma-gothic-e', sans-serif;
	font-size: 38px;
	text-transform: uppercase;
	
	margin: 0;
}

#issue-nav > .row a p {
	color: var(--red);
	text-transform: uppercase;
	font-weight: normal;
	font-size: 18px;

	margin: 0;
}

#issue-nav > .row p:first-child {
	margin-bottom: 16px;
}

#issue-nav > .row > a:last-child {
	text-align: right;
	justify-content: flex-end;
}


#issue-nav > .row .generated-icon {
	width: 250px;
	height: 150px;
	flex: 0 0 250px;
	color: white;
}

#issue-nav > .row .generated-icon > div {
	border: 6px solid white;
}

#issue-nav > .row .generated-icon > div > * {
	color: white;
	flex-grow: 1;
	font-weight: bold;
	margin: 0;
}

#issue-nav > .row .generated-icon > div > :last-child {
	font-size: 64px;
	font-weight: bold;
	margin-right: 16px;
}

#issue-nav > .row .generated-icon > div > :not(:last-child) {
	margin-left: 16px;
}


@media (max-width: 600px) {
	#issue-nav > .row {
		flex-flow: column nowrap;
	}

	#issue-nav > .row > *:not(.divider) {
		min-width: 0;
	}

	#issue-nav > .row > a:last-child {
		order: -1;
	}

	#issue-nav > .row > div {
		display: none;
	}

	#issue-nav > .row img {
		flex: 1;
		max-width: 200px;
		height: auto;
	}

	#issue-nav > .row .generated-icon {
		flex: 1;
		max-width: 200px;
		height: auto;
	}

	#issue-nav > .row > div {
		flex: 2;
	}


	#issue-nav > .row .generated-icon > div {
		flex-flow: column nowrap !important;
		padding-left: 8px;
		padding-right: 8px;
	}

	#issue-nav > .row .generated-icon > div > p {
		margin: 0 !important;
	}
}