/* Same two colours, typeface and two sizes as the main SURVEILLANCE site. */
:root {
	--ink: #030303;
	--paper: #FAFAFA;
	--line: color-mix(in srgb, var(--paper) 26%, var(--ink));
	--muted: color-mix(in srgb, var(--paper) 62%, var(--ink));
	--raise: color-mix(in srgb, var(--paper) 5%, var(--ink));

	--font: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--fs-text: clamp(12px, 0.35vw + 10.5px, 14px);
	--fs-head: clamp(14px, 0.25vw + 12.5px, 16px);

	--border: var(--line);
	--border-hover: var(--paper);
	--bg: var(--ink);
	--fg: var(--paper);
	--surface-dark: var(--ink);
	--surface-light: var(--paper);
	--dark-card: var(--raise);
	color-scheme: dark;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--fg);
	font: 400 var(--fs-text)/1.45 var(--font);
	text-transform: uppercase;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--paper);
	color: var(--ink);
}

.page {
	width: 100%;
	margin: 0;
	padding: 12px;
	box-sizing: border-box;
}

.grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: var(--cell, 280px);
	gap: 12px;
}

@media (max-width: 1200px) {
	.grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 600px) {
	.grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.card {
	position: relative;
	grid-column: span 1;
	grid-row: span 1;
	overflow: hidden;
	border: 1px solid var(--border);
	color: inherit;
	text-decoration: none;
}

.card.has-image {
	background: var(--bg);
}

.card.no-image {
	background: var(--dark-card);
}

.card[data-size="2x1"] {
	grid-column: span 2;
}

.card[data-size="1x2"] {
	grid-row: span 2;
}

.card[data-size="2x2"] {
	grid-column: span 2;
	grid-row: span 2;
}

.card:hover,
.card:focus-visible {
	border-color: var(--border-hover);
	z-index: 2;
}

.card img,
.card video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.card .caption {
	position: absolute;
	left: 0;
	bottom: 0;
	max-width: 80%;
	max-height: 50%;
	margin: 10px;
	padding: 8px 10px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow-wrap: anywhere;
	word-break: break-word;
	font-weight: 400;
	font-size: var(--fs-text);
	line-height: 1.3;
}

.card .caption-stack {
	position: absolute;
	left: 0;
	bottom: 0;
	max-width: 80%;
	max-height: 70%;
	margin: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.card .caption-stack .card-title,
.card .caption-stack .caption {
	position: static;
	margin: 0;
	max-width: 100%;
}

.card .card-title {
	padding: 6px 10px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: 400;
	font-size: var(--fs-text);
	line-height: 1.3;
	border: 1px solid var(--border);
}

.tone-dark {
	background: var(--surface-dark);
	color: var(--surface-light);
}

.tone-light {
	background: var(--surface-light);
	color: var(--surface-dark);
}

.card.no-image {
	display: flex;
}

.card.no-image .caption {
	position: static;
	display: flex;
	align-items: flex-end;
	flex: 1;
	margin: 0;
	padding: 16px;
	max-width: none;
	max-height: none;
	overflow: hidden;
	-webkit-line-clamp: unset;
	font-size: var(--fs-head);
}

.empty-state {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--muted);
	padding: 60px 20px;
}

.back-link {
	display: inline-block;
	margin-bottom: 12px;
	color: var(--muted);
	text-decoration: none;
}

.back-link:hover,
.back-link:focus-visible {
	color: var(--paper);
}

.project-layout {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

@media (min-width: 860px) {
	.project-layout {
		flex-direction: row;
		align-items: flex-start;
	}

	.project-grid {
		flex: 1 1 65%;
		min-width: 0;
	}

	.project-info {
		flex: 1 1 35%;
		position: sticky;
		top: 12px;
	}
}

.project-title {
	display: inline-block;
	font-weight: 400;
	font-size: var(--fs-head);
	padding: 8px 10px;
	border: 1px solid var(--border);
	margin-bottom: 16px;
}

.project-body {
	line-height: 1.6;
	color: var(--fg);
}