/* Evan's Art: the page. A plain white wall so the work does the talking. */

.eva-page {
	margin: 0;
	background: #fff;
	color: #111;
	font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.eva-edit {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 20;
	font: 600 14px/1 Archivo, system-ui, sans-serif;
	color: #fff;
	background: #111;
	padding: 11px 16px;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.eva-foot {
	font-size: 13px;
	color: #777;
	padding: 48px clamp(16px, 4vw, 56px) 56px;
}

.eva {
	box-sizing: border-box;
	width: 100%;
	max-width: 1880px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 56px);
}
.eva *, .eva *::before, .eva *::after { box-sizing: border-box; }
.eva-head { padding: clamp(36px, 8vw, 112px) 0 clamp(24px, 4vw, 48px); }
.eva-title {
	font-family: "Archivo Black", Archivo, Impact, sans-serif;
	font-weight: 400;
	font-size: clamp(56px, 14vw, 200px);
	line-height: .86;
	letter-spacing: -.035em;
	margin: 0;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}
.eva-intro {
	font-size: clamp(17px, 2vw, 22px);
	font-weight: 500;
	color: #444;
	margin: 18px 0 0;
	max-width: 34em;
}
.eva-empty { color: #777; padding: 40px 0; font-size: 18px; }

.eva-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: clamp(8px, 1.2vw, 18px);
}
.eva-grid.eva-js { grid-auto-rows: 4px; }   /* masonry: art.js gives each piece its row span */
.eva-item {
	display: block;
	position: relative;
	overflow: hidden;
	background: #f2f2f2;
	cursor: zoom-in;
	color: inherit;
	text-decoration: none;
}
.eva-grid.eva-js .eva-item { aspect-ratio: auto !important; }
.eva-item.is-big { grid-column: span 2; }
.eva-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.eva-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 28px 12px 10px;
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(transparent, rgba(0, 0, 0, .6));
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .2s, transform .2s;
}
.eva-item:hover .eva-label, .eva-item:focus-visible .eva-label { opacity: 1; transform: none; }
@media (hover: none) { .eva-label { display: none; } }
.eva-item:focus-visible { outline: 3px solid #111; outline-offset: 3px; }

@media (max-width: 1100px) { .eva-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .eva-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.eva-about {
	max-width: 40em;
	padding: clamp(40px, 7vw, 96px) 0 0;
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.6;
}
.eva-about h2 {
	font-family: "Archivo Black", Archivo, sans-serif;
	font-weight: 400;
	font-size: 15px;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: 0 0 14px;
}
.eva-about p { margin: 0 0 1em; }
.eva-write a {
	display: inline-block;
	margin-top: 6px;
	font-weight: 600;
	color: #111;
	border-bottom: 2px solid #111;
	text-decoration: none;
	padding-bottom: 2px;
}

/* the viewer */
.eva-box {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: #fff;
	color: #111;
}
.eva-box::backdrop { background: #fff; }
.eva-box[open] { display: flex; align-items: center; justify-content: center; }
.eva-box figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.eva-box img {
	max-width: calc(100vw - 140px);
	max-height: calc(100dvh - 110px);
	width: auto;
	height: auto;
	object-fit: contain;
	user-select: none;
}
.eva-box figcaption { font-size: 15px; text-align: center; padding: 0 16px; }
.eva-box figcaption b { font-weight: 600; }
.eva-box figcaption span { color: #666; }
.eva-box button {
	position: absolute;
	border: 0;
	background: #f2f2f2;
	color: #111;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}
.eva-box button:hover, .eva-box button:focus-visible { background: #111; color: #fff; }
.eva-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.eva-next { right: 16px; top: 50%; transform: translateY(-50%); }
.eva-close { right: 16px; top: 16px; }
@media (max-width: 700px) {
	.eva-box img { max-width: calc(100vw - 24px); max-height: calc(100dvh - 150px); }
	.eva-prev, .eva-next { top: auto; bottom: 16px; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .eva-label { transition: none; } }