:root {
	--ink: #17211f;
	--paper: #f4f1e9;
	--acid: #d9ff65;
	--orange: #f07a52;
	--line: rgba(23, 33, 31, .16);
}

html { scroll-behavior: smooth; }
.projects-page { margin: 0; min-width: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); overflow-wrap: anywhere; }
.projects-page a { color: inherit; text-decoration: none; }
.projects-page img { display: block; max-width: 100%; }

.project-nav {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.5rem clamp(1.25rem, 5vw, 5rem);
	border-bottom: 1px solid var(--line);
}
.project-nav__brand { font-weight: 700; letter-spacing: -.02em; }
.project-nav nav { display: flex; gap: clamp(.8rem, 2.5vw, 2.2rem); font-size: .85rem; }
.project-nav nav a { border-bottom: 1px solid transparent; }
.project-nav nav a:hover { border-color: currentColor; }

.project-eyebrow { margin: 0 0 1rem; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }

.project-archive { width: 100%; max-width: 106rem; margin: 0 auto; padding: clamp(3rem, 7vw, 7rem) clamp(1.25rem, 5vw, 5rem); }
.archive-heading { display: flex; margin-bottom: 3rem; align-items: end; justify-content: space-between; border-bottom: 1px solid var(--line); }
.archive-heading h2 { margin-bottom: .7rem; font-size: clamp(2.4rem, 5vw, 4.5rem); letter-spacing: -.05em; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.project-card { min-width: 0; background: #fff; border: 1px solid var(--line); transition: transform 180ms ease, box-shadow 180ms ease; }
.project-card:hover { transform: translateY(-.35rem); box-shadow: 0 1.4rem 3rem rgba(23,33,31,.12); }
.project-card > a { display: flex; height: 100%; flex-direction: column; }
.project-card__image { position: relative; height: 15rem; overflow: hidden; background: #d7ded9; }
.project-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.project-card:hover img { transform: scale(1.04); }
.project-card__image--graphic { display: grid; place-items: center; background: repeating-radial-gradient(circle at center, #d9ff65 0 1.1rem, #17211f 1.2rem 2rem); }
.project-card__image--graphic span { display: grid; width: 6rem; height: 6rem; place-items: center; color: white; background: var(--orange); border-radius: 50%; font-weight: 800; font-size: 2rem; }
.project-card__body { display: flex; flex: 1; padding: 1.5rem; flex-direction: column; }
.project-card__tag { color: #63706d; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.project-card h3 { margin: .65rem 0; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.05; letter-spacing: -.03em; }
.project-card p { color: #5d6765; font-size: .92rem; line-height: 1.6; }
.project-card__arrow { margin-top: auto; padding-top: 1rem; font-weight: 700; font-size: .82rem; }

.project-footer-cta { padding: clamp(5rem, 10vw, 10rem) 1.5rem; color: white; background: var(--orange); text-align: center; }
.project-footer-cta h2 { margin: 0 0 2rem; color: white; font-size: clamp(2.5rem, 7vw, 6.5rem); letter-spacing: -.06em; }
.project-footer-cta a { display: inline-block; padding-bottom: .3rem; border-bottom: 2px solid; font-weight: 700; }
.project-footer { display: flex; justify-content: space-between; padding: 1.5rem clamp(1.25rem, 5vw, 5rem); color: white; background: var(--ink); font-size: .8rem; }

@media screen and (max-width: 900px) {
	.project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 620px) {
	.project-nav { gap: .75rem; padding: 1rem 1.1rem; align-items: flex-start; flex-direction: column; }
	.project-nav nav { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 1rem; text-align: left; }
	.project-nav nav a { min-height: 2.25rem; padding: .35rem 0; }
	.project-archive { padding: 2.5rem 1rem 4rem; }
	.archive-heading { display: block; margin-bottom: 1.5rem; }
	.archive-heading h2 { font-size: clamp(2rem, 11vw, 3rem); overflow-wrap: normal; }
	.project-grid { grid-template-columns: 1fr; }
	.project-card__image { height: clamp(12rem, 62vw, 18rem); }
	.project-card__body { padding: 1.2rem; }
	.project-footer-cta { padding: 4rem 1rem; }
	.project-footer { gap: 1rem; flex-direction: column; text-align: center; }
}

@media screen and (min-width: 1600px) {
	.project-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.project-card__image { height: 16rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.project-card, .project-card__image img { transition: none; }
}

@media (hover: none) {
	.project-card:hover { transform: none; box-shadow: none; }
	.project-card:hover img { transform: none; }
}