/* Essays — blog in de taal van de site: wit, scandia, mark-highlights,
   zwarte lijnen. Overzicht (essays.html) + detail (essay.html). */
* {
	box-sizing: border-box;
}

body {
	position: static;
	height: auto;
	min-height: 100vh;
	overflow: visible;
	background: #fff;
	color: #000;
}

.essays-plate {
	min-height: 100vh;
	padding: clamp(64px, 10vh, 110px) clamp(14px, 3.4vw, 54px) clamp(30px, 6vh, 70px) clamp(76px, 4.8vw, 92px);
}

.essays-plate.narrow {
	max-width: 1140px;
}

.essays-head {
	border-bottom: 1px solid #000;
	padding-bottom: clamp(10px, 1.8vh, 18px);
	margin-bottom: clamp(6px, 1.4vh, 14px);
}

.kicker {
	margin: 0;
	font: 600 clamp(28px, 4.2vw, 58px)/0.98 "scandia-line-web", sans-serif;
	text-transform: uppercase;
	letter-spacing: .01em;
}

.kicker mark,
#essay-empty mark,
#essay-missing mark {
	background: #fff;
	color: #000;
}

/* ---------- overzicht ---------- */
#essay-list {
	display: flex;
	flex-direction: column;
}

.essay-card {
	display: flex;
	gap: clamp(16px, 2.6vw, 34px);
	align-items: flex-start;
	padding: clamp(16px, 3vh, 28px) 0;
	border-bottom: 1px solid #000;
	color: #000;
	text-decoration: none;
}

.essay-thumb {
	flex: 0 0 clamp(120px, 16vw, 220px);
}

.essay-thumb img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid #000;
	background: #fff;
}

.essay-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.e-meta {
	font: 700 clamp(10px, .85vw, 12.5px) "scandia-web", sans-serif;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: #000;
	opacity: .65;
}

/* mini-taalswitch rechtsboven + herkomstregel eronder */
#essay-article .e-toprow {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

#essay-article .e-toprow .e-meta {
	margin: 0;
}

.e-switch {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	flex: none;
}

.e-switch button {
	background: none;
	border: 0;
	padding: 2px 1px;
	font: 700 11px "scandia-web", sans-serif;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: #000;
	opacity: .4;
	cursor: pointer;
}

.e-switch button.on {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.e-switch > span {
	opacity: .35;
	font-size: 11px;
}

.e-prov {
	margin: 6px 0 14px;
	text-align: right;
	font: 500 11px "scandia-web", sans-serif;
	letter-spacing: .06em;
	opacity: .6;
}

.e-title {
	font: 600 clamp(20px, 2.8vw, 38px)/1.02 "scandia-line-web", sans-serif;
	letter-spacing: .005em;
	transition: filter .25s ease;
}

a.essay-card:hover .e-title {
	filter: blur(4px);
}

.e-excerpt {
	margin: 0;
	font: 500 clamp(13px, 1.05vw, 16px)/1.65 "scandia-web", sans-serif;
	max-width: 62ch;
}

.e-pub {
	font: 500 clamp(12px, .95vw, 14px) "scandia-web", sans-serif;
	opacity: .75;
}

#essay-empty,
#essay-missing {
	font: 500 clamp(14px, 1.2vw, 17px) "scandia-web", sans-serif;
	padding: clamp(20px, 4vh, 40px) 0;
}

/* ---------- detail ---------- */
#essay-article .e-meta {
	margin: 0 0 14px;
}

#essay-article h1 {
	margin: 0 0 14px;
	font: 600 clamp(22px, 3vw, 44px)/0.98 "scandia-line-web", sans-serif;
	letter-spacing: .005em;
}

#essay-article .e-excerpt {
	margin: 0 0 clamp(20px, 3.4vh, 32px);
	font: 500 clamp(15px, 1.3vw, 19px)/1.6 "scandia-web", sans-serif;
	max-width: 60ch;
	cursor: text;
}

.e-cover,
.e-fig {
	margin: 0 0 clamp(20px, 3.4vh, 32px);
}

.e-cover img,
.e-fig img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid #000;
	background: #fff;
}

.e-body {
	font: 400 clamp(14px, 1.1vw, 17px)/1.75 "scandia-web", sans-serif;
	max-width: 66ch;
	cursor: text;
}

/* per ongeluk (of via Word-plak) vetgezette stukken temmen tot semibold */
.e-body strong,
.e-body b {
	font-weight: 600;
}

.e-body p {
	margin: 0 0 1.1em;
}

.e-body h2 {
	font: 600 clamp(20px, 2.4vw, 32px)/1.1 "scandia-line-web", sans-serif;
	margin: 1.4em 0 .5em;
}

.e-body h3 {
	font: 600 clamp(17px, 1.8vw, 24px)/1.2 "scandia-line-web", sans-serif;
	margin: 1.2em 0 .4em;
}

.e-body ul,
.e-body ol {
	margin: 0 0 1.1em 1.3em;
	padding: 0;
}

.e-body a {
	color: #000;
	text-decoration: underline;
}

.e-body a:hover {
	background: #000;
	color: #fff;
	text-decoration: none;
}

.e-pubbox {
	margin: clamp(22px, 4vh, 36px) 0 0;
	padding: 14px 16px;
	border: 1px solid #000;
	font: 500 clamp(13px, 1.05vw, 16px) "scandia-web", sans-serif;
	max-width: 66ch;
}

.e-pubbox a {
	color: #000;
	font-weight: 700;
}

.e-pubbox a:hover {
	background: #000;
	color: #fff;
	text-decoration: none;
}

.e-links-title {
	margin: clamp(22px, 4vh, 36px) 0 10px;
	font: 600 11.5px "scandia-line-web", sans-serif;
	text-transform: uppercase;
	letter-spacing: .16em;
}

.e-links {
	margin: 0 0 clamp(20px, 4vh, 40px);
	padding: 0;
	list-style: none;
}

.e-links li {
	padding: 7px 0;
	border-top: 1px solid #000;
	font: 500 clamp(13px, 1.05vw, 16px) "scandia-web", sans-serif;
}

.e-links li:last-child {
	border-bottom: 1px solid #000;
}

.e-links a {
	color: #000;
}

.e-links a:hover {
	background: #000;
	color: #fff;
	text-decoration: none;
}

::selection {
	background: #000;
	color: #fff;
}

@media (max-width: 700px) {
	.essays-plate {
		padding-left: 70px;
	}

	.essay-card {
		flex-direction: column;
	}

	.essay-thumb {
		flex-basis: auto;
		width: min(100%, 320px);
	}
}