body.odworks-projects {
	margin: 0;
	background: var(--odw-bg);
	color: var(--odw-ink);
	font-family: var(--odw-font);
	font-weight: 400;
	letter-spacing: 0.005em;
	overflow-x: hidden;
}

body.odworks-projects a {
	color: inherit;
	text-decoration: none;
}

.odwpr-hero {
	padding: 64px 6vw 34px;
	border-bottom: 1px solid var(--odw-line);
}

.odwpr-eyebrow {
	font-size: 8px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #57534d;
	margin-bottom: 16px;
}

.odwpr-hero h1 {
	margin: 0;
	font-size: clamp(42px, 5.6vw, 84px);
	font-weight: 300;
	letter-spacing: -0.05em;
	line-height: 0.94;
}

.odwpr-title-line {
	display: block;
}

.odwpr-hero p {
	margin: 18px 0 0;
	max-width: 500px;
	font-size: 11px;
	line-height: 1.7;
	color: #57534d;
	word-break: keep-all;
}

.odwpr-list {
	padding: 44px 6vw 100px;
}

.odwpr-project {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: 34px;
	align-items: start;
	margin-bottom: 68px;
}

.odwpr-project:nth-child(even) {
	grid-template-columns: minmax(0, 1fr) 230px;
}

.odwpr-project:nth-child(even) .odwpr-meta {
	order: 2;
}

.odwpr-project:nth-child(even) .odwpr-visual {
	order: 1;
}

.odwpr-meta {
	padding-top: 5px;
	position: sticky;
	top: 42px;
}

.odwpr-name {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.02em;
	margin-bottom: 12px;
	word-break: keep-all;
}

.odwpr-line {
	width: 44px;
	height: 1px;
	background: #8d8981;
	margin: 0 0 13px;
}

.odwpr-info {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 8px 14px;
}

.odwpr-label {
	font-size: 8px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #858179;
}

.odwpr-value {
	font-size: 11px;
	line-height: 1.5;
	color: #4e4a44;
	word-break: keep-all;
}

.odwpr-visual {
	display: flex;
	justify-content: flex-start;
}

.odwpr-frame {
	position: relative;
	overflow: hidden;
	background: #ddd;
	box-shadow: 0 18px 34px rgba(0, 0, 0, 0.035);
}

.odwpr-project.odw-reveal {
	transition-delay: var(--odw-delay, 0s);
}

.odwpr-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-width: none;
	transform: translate3d(0, 42px, 0) scale(1.08);
	transition: transform 1.15s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.5s ease;
	will-change: transform;
}

.odwpr-project.odw-reveal.show .odwpr-frame img {
	transform: translate3d(0, 0, 0) scale(1);
}

.odwpr-frame:hover img {
	transform: scale(1.045);
	filter: brightness(0.67);
}

.odwpr-hover {
	position: absolute;
	left: 14px;
	right: 14px;
	top: 50%;
	transform: translateY(-43%);
	color: #fff;
	font-size: clamp(14px, 3.6vw, 20px);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.3;
	text-align: center;
	white-space: normal;
	word-break: keep-all;
	overflow-wrap: anywhere;
	opacity: 0;
	transition: opacity 0.4s ease, transform 0.45s var(--odw-ease);
	z-index: 2;
	pointer-events: none;
}

@media (min-width: 901px) {
	.odwpr-hover {
		font-size: clamp(13px, 1.05vw, 18px);
	}
}

.odwpr-frame:hover .odwpr-hover {
	opacity: 1;
	transform: translateY(-50%);
}

.odwpr-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.12));
	opacity: 0;
	transition: 0.45s ease;
	pointer-events: none;
}

.odwpr-frame:hover::after {
	opacity: 1;
}

.odwpr-project.p1 .odwpr-frame {
	width: 72%;
	aspect-ratio: 1.45 / 1;
	margin-left: 4%;
}

.odwpr-project.p2 .odwpr-frame {
	width: 54%;
	aspect-ratio: 0.78 / 1;
	margin-left: 18%;
}

.odwpr-project.p3 .odwpr-frame {
	width: 68%;
	aspect-ratio: 1.25 / 1;
	margin-left: 10%;
}

.odwpr-project.p4 .odwpr-frame {
	width: 47%;
	aspect-ratio: 0.72 / 1;
	margin-left: 36%;
}

.odwpr-project.p5 .odwpr-frame {
	width: 74%;
	aspect-ratio: 1.58 / 1;
	margin-left: 2%;
}

.odwpr-project.p6 .odwpr-frame {
	width: 52%;
	aspect-ratio: 0.8 / 1;
	margin-left: 22%;
}

.odwpr-project:nth-child(even) .odwpr-visual {
	justify-content: flex-end;
}

.odwpr-project:nth-child(even).p2 .odwpr-frame {
	margin-left: 0;
	margin-right: 18%;
}

.odwpr-project:nth-child(even).p4 .odwpr-frame {
	margin-left: 0;
	margin-right: 30%;
}

.odwpr-project:nth-child(even).p6 .odwpr-frame {
	margin-left: 0;
	margin-right: 20%;
}

@media (max-width: 900px) {
	.odwpr-hero {
		padding: 72px 20px 28px;
	}

	.odwpr-list {
		padding: 34px 20px 70px;
	}

	.odwpr-project,
	.odwpr-project:nth-child(even) {
		grid-template-columns: 1fr;
		gap: 18px;
		margin-bottom: 62px;
	}

	.odwpr-project:nth-child(even) .odwpr-meta,
	.odwpr-project:nth-child(even) .odwpr-visual {
		order: initial;
	}

	.odwpr-meta {
		position: relative;
		top: auto;
	}

	.odwpr-visual,
	.odwpr-project:nth-child(even) .odwpr-visual {
		justify-content: flex-start;
	}

	.odwpr-project.p1 .odwpr-frame,
	.odwpr-project.p2 .odwpr-frame,
	.odwpr-project.p3 .odwpr-frame,
	.odwpr-project.p4 .odwpr-frame,
	.odwpr-project.p5 .odwpr-frame,
	.odwpr-project.p6 .odwpr-frame,
	.odwpr-project:nth-child(even).p2 .odwpr-frame,
	.odwpr-project:nth-child(even).p4 .odwpr-frame,
	.odwpr-project:nth-child(even).p6 .odwpr-frame {
		margin: 0;
	}

	.odwpr-project.p1 .odwpr-frame {
		width: 92%;
	}

	.odwpr-project.p2 .odwpr-frame {
		width: 72%;
		margin-left: 18%;
	}

	.odwpr-project.p3 .odwpr-frame {
		width: 88%;
	}

	.odwpr-project.p4 .odwpr-frame {
		width: 68%;
		margin-left: 24%;
	}

	.odwpr-project.p5 .odwpr-frame {
		width: 94%;
	}

	.odwpr-project.p6 .odwpr-frame {
		width: 74%;
		margin-left: 14%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.odwpr-hero.odw-reveal,
	.odwpr-project.odw-reveal,
	.odwpr-frame img {
		opacity: 1;
		filter: none;
		transform: none;
		transition: none;
	}
}