:root {
	--canvas: #f8f8f5;
	--ink: #232522;
	--heading: #3f4642;
	--muted: #626760;
	--line: #c8cbc5;
	--plum: #4e3450;
	--ochre: #c79528;
	--green: #646144;
	--sienna: #9b3f26;
}

body {
	background: var(--canvas);
	color: var(--ink);
	font-family: Arial, sans-serif;
	line-height: 1.55;
}

.site-header,
footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 1.1rem clamp(1rem, 4vw, 4.5rem);
}

.site-header {
	position: relative;
	z-index: 2;
}

.site-header nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 1rem 1.5rem;
	font-size: 0.78rem;
}

.site-header a,
footer a,
.project-mark {
	text-underline-offset: 0.3rem;
}

.site-header a,
footer a {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
}

.project-mark {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	font-size: 0.82rem;
	font-weight: 700;
	text-decoration: none;
}

.project-mark span {
	display: block;
	width: 1.6rem;
	height: 1px;
}

main {
	min-height: 80vh;
}

.archive-intro {
	display: grid;
	grid-template-columns: minmax(8rem, 0.55fr) minmax(18rem, 1.65fr) minmax(15rem, 0.8fr);
	gap: clamp(1.5rem, 4vw, 4.5rem);
	align-items: end;
	padding: clamp(4rem, 6.5vw, 6.5rem) clamp(1rem, 4vw, 4.5rem) clamp(2.5rem, 4vw, 4rem);
}

.archive-intro h1 {
	max-width: 11ch;
	margin: 0;
	color: var(--heading);
	font-size: clamp(3.7rem, 5.7vw, 6rem);
	font-weight: 400;
	letter-spacing: -0.065em;
	line-height: 0.92;
}

.archive-intro .eyebrow,
.archive-intro .intro-copy {
	margin: 0;
}

.intro-copy {
	max-width: 29rem;
	color: var(--muted);
}

.portrait-wall {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
	padding: 0 6px 6px;
}

.portrait-card,
.mosaic-portrait {
	position: relative;
	display: block;
	min-width: 0;
	background: var(--ink);
	color: #fff;
	text-decoration: none;
}

.portrait-card .media-frame,
.mosaic-portrait .media-frame {
	display: block;
	aspect-ratio: 3 / 4;
}

.portrait-card img,
.mosaic-portrait img {
	filter: saturate(0.68) contrast(1.04);
}

.portrait-card::after,
.mosaic-portrait::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 34%;
	background: linear-gradient(to top, rgb(20 18 20 / 0.76), transparent);
	pointer-events: none;
}

.portrait-name,
.mosaic-portrait > span:last-child {
	position: absolute;
	right: 1rem;
	bottom: 0.8rem;
	left: 1rem;
	z-index: 1;
	font-size: clamp(0.88rem, 1.3vw, 1.08rem);
	font-weight: 700;
	letter-spacing: 0.01em;
}

.portrait-card:focus-visible,
.mosaic-portrait:focus-visible {
	z-index: 2;
	outline-color: var(--ochre);
	outline-offset: -5px;
}

.archive-intro.compact {
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.archive-intro.compact h1 {
	font-size: clamp(3.7rem, 5.7vw, 6rem);
}

.masonry {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	padding: 0 8px 8px;
}

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

.mosaic-column > * {
	margin: 0;
}

.mosaic-note {
	display: flex;
	min-height: 12rem;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(1.4rem, 2.7vw, 2.6rem);
	background: var(--plum);
	color: #fff;
}

a.mosaic-note {
	color: inherit;
	text-decoration: none;
}

.mosaic-note p {
	margin: 0;
}

.mosaic-note p:last-of-type {
	font-size: clamp(1.35rem, 2vw, 2.05rem);
	letter-spacing: -0.035em;
	line-height: 1.08;
}

.mosaic-note.accent {
	background: var(--green);
}

.mosaic-note.accent span {
	align-self: flex-end;
	font-size: 2rem;
}

.mosaic-note.invite {
	background: linear-gradient(to bottom, var(--ochre) 0 calc(100% - 0.75rem), var(--sienna) calc(100% - 0.75rem));
	color: var(--ink);
}

.mosaic-note.tile-short {
	min-height: 10rem;
}

.mosaic-note.tile-medium {
	min-height: 13rem;
}

.mosaic-note.tile-tall {
	min-height: 15rem;
}

@media (min-width: 901px) {
	.mosaic-note.tile-short {
		min-height: 22rem;
	}

	.mosaic-note.tile-medium {
		min-height: 25rem;
	}

	.mosaic-note.tile-tall {
		min-height: 28rem;
	}
}

.mosaic-note.invite span {
	align-self: flex-end;
	font-size: 2rem;
}

a.mosaic-note:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: -6px;
}

footer {
	min-height: 7rem;
	font-size: 0.78rem;
}

footer p {
	margin: 0;
	font-weight: 700;
}

@media (max-width: 900px) {
	.archive-intro {
		grid-template-columns: 1fr 2fr;
	}

	.archive-intro .intro-copy {
		grid-column: 2;
	}

	.portrait-wall {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.masonry {
		display: block;
		columns: 3;
		column-gap: 8px;
	}

	.mosaic-column {
		display: contents;
	}

	.mosaic-portrait,
	.mosaic-note {
		break-inside: avoid;
		margin: 0 0 8px;
	}
}

@media (max-width: 620px) {
	.site-header {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.8rem;
	}

	.site-header nav {
		justify-content: flex-start;
	}

	.archive-intro {
		display: block;
		padding-top: 3.75rem;
	}

	.archive-intro h1 {
		margin: 1.25rem 0 1.5rem;
		font-size: clamp(3.3rem, 15vw, 4.8rem);
	}

	.archive-intro.compact h1 {
		font-size: clamp(3.5rem, 17vw, 5.2rem);
	}

	.portrait-wall {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px;
		padding: 0 4px 4px;
	}

	.masonry {
		columns: 2;
		column-gap: 4px;
		padding: 0 4px 4px;
	}

	.mosaic-portrait,
	.mosaic-note {
		margin-bottom: 4px;
	}

	.mosaic-note {
		min-height: 10rem;
	}

	footer {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.75rem;
	}
}

@media (max-width: 380px) {
	.portrait-wall,
	.masonry {
		display: block;
		columns: 1;
	}
}

/* Approved shared site chrome, kept here so this concept is portable. */
body > .site-header,
body > footer {
	background: #4e3450;
	color: #fff;
	border-color: #4e3450;
}

body > .site-header a,
body > footer a {
	color: #fff;
}

body > .site-header a:hover,
body > .site-header a:focus-visible,
body > .site-header a[aria-current="page"],
body > footer a:hover,
body > footer a:focus-visible,
body > footer a[aria-current="page"] {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: #fff;
	text-underline-offset: 0.35rem;
}

body > .site-header a:focus-visible,
body > footer a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

body > .site-header .project-mark span {
	background: #fff;
}