:root {
	--ml-black: #080808;
	--ml-paper: #e8dfcf;
	--ml-sepia: #9c7448;
}


/* BASIC PAGE SETUP */

* {
	box-sizing: border-box;
}

html {
	background: #111;
}

body {
	margin: 0;

	background: #111;
	color: var(--ml-paper);

	font-family:
		Arial,
		Helvetica,
		sans-serif;
}


/* PAGE HEADING */

.portal-archive {
	width: min(1120px, calc(100% - 32px));

	margin: 0 auto;

	padding: 48px 0 72px;
}

.portal-heading {
	text-align: center;
}

.portal-heading h1 {
	margin: 0.15em 0;

	color: var(--ml-paper);

	letter-spacing: 0.08em;
}

.portal-heading p {
	color: rgba(232, 223, 207, 0.8);
}

.portal-kicker {
	color: var(--ml-sepia) !important;

	letter-spacing: 0.18em;
}


/* VIDEO THUMBNAIL GALLERY */

.ml-media-gallery {
	display: flex;
	flex-wrap: wrap;

	justify-content: center;
	align-items: flex-start;

	gap: 24px;

	margin-top: 40px;
}

.ml-media-item {
	flex: 0 1 320px;

	width: 320px;

	margin: 0;
}

.ml-media-open {
	position: relative;

	display: block;

	width: 100%;

	padding: 0;

	overflow: hidden;

	border: 1px solid rgba(232, 223, 207, 0.32);

	background: #000;

	cursor: pointer;
}

.ml-media-open video {
	display: block;

	width: 100%;
	height: 480px;

	background: #000;

	object-fit: contain;
	object-position: center;

	pointer-events: none;

	filter:
		sepia(0.18)
		contrast(1.05);

	transition:
		transform 0.25s ease,
		filter 0.25s ease;
}

.ml-media-open:hover video,
.ml-media-open:focus-visible video {
	transform: scale(1.015);

	filter:
		sepia(0)
		contrast(1.08);
}

.ml-media-open:focus-visible {
	outline: 2px solid var(--ml-paper);
	outline-offset: 4px;
}

.ml-play {
	position: absolute;

	top: 50%;
	left: 50%;

	transform:
		translate(-50%, -50%);

	padding: 10px 14px;

	background:
		rgba(0, 0, 0, 0.78);

	color: #fff;

	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.14em;

	pointer-events: none;
}

.ml-media-item h2 {
	margin: 12px 0 0;

	color: var(--ml-paper);

	font-size: 15px;
	line-height: 1.35;
	letter-spacing: 0.08em;

	text-align: center;
	text-transform: uppercase;
}


/* FULL-SCREEN VIEWER */

.ml-media-viewer {
	position: fixed;

	inset: 0;

	z-index: 10000;

	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	padding:
		54px
		72px
		28px;

	overflow: hidden;

	background:
		rgba(0, 0, 0, 0.97);

	color: #fff;
}

.ml-media-viewer[hidden] {
	display: none;
}

body.ml-media-open {
	overflow: hidden;
}


/* VIDEO STAGE */

.ml-media-stage {
	display: flex;
	flex: 1 1 auto;

	flex-direction: column;

	align-items: center;
	justify-content: center;

	width: min(1100px, 100%);
	min-height: 0;

	margin: 0 auto;

	text-align: center;
}

.ml-media-player {
	display: block !important;

	width: auto !important;
	height: auto !important;

	max-width: 100% !important;
	max-height:
		calc(100vh - 220px) !important;

	margin: 0 auto !important;

	background: #000;

	object-fit: contain !important;
	object-position: center !important;

	pointer-events: auto !important;
}


/* VIDEO INFORMATION */

.ml-media-stage h2 {
	flex: 0 0 auto;

	margin: 14px 0 4px;

	color: #fff;

	font-size: 18px;
	line-height: 1.35;
	letter-spacing: 0.08em;

	text-transform: uppercase;
}

.ml-media-stage p {
	flex: 0 0 auto;

	max-width: 760px;

	margin: 0 auto;

	color:
		rgba(255, 255, 255, 0.72);

	font-size: 14px;
	line-height: 1.5;
}


/* CLOSE BUTTON */

.ml-media-close {
	position: fixed;

	top: 14px;
	right: 22px;

	z-index: 10001;

	padding: 0;

	border: 0;

	background: transparent;
	color: #fff;

	font-size: 42px;
	line-height: 1;

	cursor: pointer;
}

.ml-media-close:hover,
.ml-media-close:focus-visible {
	color: var(--ml-sepia);
}


/* VIEWER CONTROLS */

.ml-media-controls {
	display: flex;
	flex: 0 0 auto;

	flex-wrap: wrap;

	align-items: center;
	justify-content: center;

	gap: 12px;

	width: 100%;

	margin-top: 18px;
}

.ml-media-controls button {
	padding: 9px 13px;

	border:
		1px solid
		rgba(255, 255, 255, 0.55);

	background: transparent;
	color: #fff;

	font-size: 11px;
	letter-spacing: 0.1em;

	cursor: pointer;
}

.ml-media-controls button:hover,
.ml-media-controls button:focus-visible {
	border-color: var(--ml-sepia);

	background: var(--ml-sepia);
	color: #fff;
}

.ml-media-play-pause {
	min-width: 74px;
}

.ml-media-counter {
	min-width: 190px;

	color:
		rgba(255, 255, 255, 0.85);

	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.08em;

	text-align: center;
	text-transform: uppercase;
}


/* MOBILE */

@media screen and (max-width: 700px) {

	.portal-archive {
		width:
			min(100% - 24px, 1120px);

		padding-top: 32px;
	}

	.ml-media-item {
		flex-basis: 100%;

		width: 100%;
		max-width: 360px;
	}

	.ml-media-open video {
		width: 100%;

		height: 70vh;
		max-height: 560px;

		object-fit: contain;
		object-position: center;
	}

	.ml-media-viewer {
		padding:
			50px
			14px
			18px;
	}

	.ml-media-stage {
		width: 100%;
	}

	.ml-media-player {
		width: auto !important;
		height: auto !important;

		max-width: 100% !important;

		max-height:
			calc(100vh - 240px) !important;

		object-fit: contain !important;
		object-position: center !important;
	}

	.ml-media-stage h2 {
		margin-top: 12px;

		font-size: 16px;
	}

	.ml-media-stage p {
		font-size: 13px;
	}

	.ml-media-controls {
		gap: 8px;

		margin-top: 14px;
	}

	.ml-media-counter {
		order: 4;

		flex-basis: 100%;

		min-width: 100px;

		font-size: 10px;
	}

	.ml-media-controls button {
		padding: 8px;

		font-size: 10px;
	}

	.ml-media-close {
		top: 10px;
		right: 14px;
	}

}