/* Accueil V2 — local proof compositions. */

.home-v2 .work {
	padding: 7.5rem 0 8.25rem;
	background: var(--home-paper);
	color: var(--home-ink);
}

.home-v2 .work-intro {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 1.5rem;
	margin-bottom: 5.5rem;
}

.home-v2 .work-intro h2 {
	grid-column: 1 / 9;
	max-width: none;
	margin: 0;
	font-size: clamp(2.875rem, 5vw, 4.75rem);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.038em;
	color: var(--home-ink);
}

.home-v2 .project {
	position: relative;
	min-width: 0;
}

.home-v2 .project .frame {
	width: 100%;
	overflow: hidden;
}

.home-v2 .project .frame img {
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid rgb(41 39 36 / 20%);
	object-fit: cover;
	object-position: top center;
}

.home-v2 .project-label {
	margin-top: 1.125rem;
}

.home-v2 .project-label h3 {
	margin: 0 0 0.625rem;
	font-size: 1.5625rem;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--home-ink);
}

.home-v2 .project-label p {
	max-width: 35rem;
	margin: 0 0 0.625rem;
	color: var(--home-muted);
	font-size: 1rem;
	line-height: 1.56;
}

.home-v2 .philippe,
.home-v2 .angele {
	width: 60%;
}

.home-v2 .philippe {
	margin-left: 0;
}

.home-v2 .philippe .frame,
.home-v2 .angele .frame {
	aspect-ratio: 1596 / 2560;
	height: auto;
	border: 1px solid rgb(41 39 36 / 20%);
}

.home-v2 .philippe .frame img,
.home-v2 .angele .frame img {
	height: 100%;
	border: 0;
	object-fit: contain;
	object-position: top center;
}

.home-v2 .philippe .project-label {
	width: 56%;
	margin-left: 6%;
}

.home-v2 .angele {
	margin: 7rem 0 0 auto;
}

.home-v2 .angele .project-label {
	width: 58%;
	margin-left: 7%;
}

.home-v2 .sandrine {
	width: 42%;
	margin: 5.75rem 9% 0 auto;
}

.home-v2 .sandrine .frame {
	aspect-ratio: 1596 / 2560;
	height: auto;
	border: 1px solid rgb(41 39 36 / 20%);
	background: #fff;
}

.home-v2 .sandrine .frame img {
	height: 100%;
	border: 0;
	object-fit: contain;
	object-position: top center;
}

.home-v2 .sandrine .project-label {
	max-width: 26.875rem;
}

.home-v2 .project-media-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.home-v2 .project-media-link:hover {
	color: inherit;
}

.home-v2 .project-media-link:focus-visible {
	outline: none;
}

.home-v2 .project-media-link:focus-visible .frame {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.home-v2 .project-site-link {
	margin-top: 0.875rem;
}

.home-v2 .work-link {
	margin-top: 5.75rem;
	padding-top: 1.375rem;
	border-top: 1px solid var(--home-line);
	color: var(--home-ink);
}

@media (max-width: 61.25rem) and (min-width: 47.5625rem) {
	.home-v2 .work {
		padding: 6.5rem 0 7rem;
	}

	.home-v2 .work-intro {
		margin-bottom: 4.75rem;
	}

	.home-v2 .philippe,
	.home-v2 .angele {
		width: 74%;
	}

	.home-v2 .angele {
		margin-top: 6rem;
	}

	.home-v2 .philippe .frame,
	.home-v2 .angele .frame {
		height: auto;
	}

	.home-v2 .sandrine {
		width: 46%;
		margin-top: 5rem;
	}

	.home-v2 .sandrine .frame {
		height: auto;
	}
}

@media (max-width: 47.5rem) {
	.home-v2 .work {
		padding: 5.375rem 0 5.75rem;
	}

	.home-v2 .work-intro {
		display: block;
		margin-bottom: 3.75rem;
	}

	.home-v2 .work-intro h2 {
		font-size: 3.125rem;
	}

	.home-v2 .philippe,
	.home-v2 .angele {
		width: 100%;
		margin-right: 0;
		margin-left: 0;
	}

	.home-v2 .philippe .frame,
	.home-v2 .angele .frame {
		height: auto;
	}

	.home-v2 .philippe .project-label,
	.home-v2 .angele .project-label {
		width: 88%;
		margin-left: 0;
	}

	.home-v2 .angele {
		margin-top: 4.5rem;
	}

	.home-v2 .angele .project-label {
		margin-left: 12%;
	}

	.home-v2 .sandrine {
		width: 84%;
		margin: 4.75rem 0 0 16%;
	}

	.home-v2 .sandrine .frame {
		height: auto;
	}

	.home-v2 .work-link {
		margin-top: 4.25rem;
	}
}

/* Motion is opt-in from home.js so the static design never depends on JavaScript. */
.has-reveal-motion .home-v2 [data-reveal].reveal-pending {
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity 400ms ease,
		transform 400ms ease;
	will-change: opacity, transform;
}

.has-reveal-motion .home-v2 [data-reveal].reveal-pending.is-revealed {
	opacity: 1;
	transform: translateY(0);
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.has-reveal-motion .home-v2 [data-reveal].reveal-pending,
	.has-reveal-motion .home-v2 [data-reveal].reveal-pending.is-revealed {
		opacity: 1;
		transform: none;
		transition: none;
		will-change: auto;
	}

	.home-v2 .btn,
	.home-v2 .text-link {
		transition: none;
	}
}