/* ==========================================================================
   Project (case study) page — single-dd_project.php
   --------------------------------------------------------------------------
   Loaded only on project pages. Uses the same tokens, pills, buttons and
   stat cards as the home page (main.css).

   1. Page + shared section bits
   2. Hero (title, summary, facts, cover)
   3. Overview — "Drafts on the desk" (brief, what we did, results)
   4. Blocks: title, text, gallery (browser / grid / reels / wide), quote,
      selected (pages / posts / articles)
   5. Testimonial
   6. Project navigation (previous · all · next) + call to action
      (the same dark card as the other pages)
   ========================================================================== */


/* 1. Page + shared section bits
   ========================================================================== */


.project {
	padding-top: 130px;
}

.project-section {
	row-gap: var(--space-l);
}

/* "01 ———— OVERVIEW" line, like the home section headings. */
.project-section__meta {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding-top: var(--space-s);
	border-top: 1px solid var(--color-line);
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
}

.project-block__title {
	align-self: flex-start;
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: var(--size-title-md);
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.1;
}

.project-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.project-tags .pill {
	box-shadow: none;
}

@media (max-width: 810px) {
	.project {
		padding-top: 110px;
	}

	.project-section {
		row-gap: var(--space-m);
	}
}


/* 2. Hero
   ========================================================================== */

.project-hero {
	row-gap: var(--space-l);
}

.project-hero__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.project-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -0.3px;
	text-transform: uppercase;
	transition: gap 0.3s;
}

.project-hero__back:hover {
	gap: 12px;
}

.project-hero__back-icon {
	font-size: 16px;
	transform: rotate(180deg);
}

.project-hero__type {
	box-shadow: none;
}

.project-hero__head {
	display: flex;
	flex-direction: column;
	row-gap: var(--space-m);
	width: 100%;
}

.project-hero__title {
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: clamp(44px, 7vw, 110px);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1;
}

.project-hero__summary {
	max-width: 640px;
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: var(--size-title-md);
	font-weight: 400;
	letter-spacing: -0.5px;
	line-height: 1.2;
	opacity: 0.6;
}

/* Client / Year / What we did / link, between two thin rules. */
.project-facts {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr) minmax(0, 2fr) auto;
	align-items: start;
	gap: var(--space-m);
	width: 100%;
	margin: 0;
	padding: var(--space-m) 0;
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
}

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

.project-facts__item--action {
	align-self: center;
}

.project-facts dt {
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 500;
	opacity: 0.5;
	text-transform: uppercase;
}

.project-facts dd {
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -0.3px;
}

.project-hero__link {
	padding: 0 var(--space-m);
	white-space: nowrap;
}

.project-hero__cover {
	width: 100%;
	margin: 0;
	aspect-ratio: 16 / 8;
	overflow: hidden;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-deep);
}

.project-hero__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 1200px) {
	.project-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.project-facts__item--wide,
	.project-facts__item--action {
		grid-column: 1 / -1;
	}

	.project-facts__item--action {
		align-self: start;
	}
}

@media (max-width: 810px) {
	.project-hero {
		row-gap: var(--space-m);
	}

	.project-hero__cover {
		aspect-ratio: 4 / 3;
	}

	.project-hero__link {
		width: 100%;
		height: 45px;
	}
}


/* 3. Overview — "Drafts on the desk"
   --------------------------------------------------------------------------
   Three sheets on a desk, tilted and overlapping: Draft 01 the brief (lined
   paper), Draft 02 what we did (dot grid), Final the results (dark card,
   numbers counting up — main.js's shared count-up). Hover picks one up.
   ========================================================================== */

.project-overview__desk {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	width: 100%;
	padding: var(--space-m) var(--space-s) var(--space-l);
	font-family: var(--font-sans);
}

.project-overview__sheet {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	min-height: 540px;
	margin-inline: -8px;
	padding: var(--space-l) var(--space-m);
	border-radius: var(--radius);
	background-color: #fff;
	box-shadow: var(--shadow-deep);
	color: var(--color-ink);
	rotate: -3deg;
	transition:
		rotate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
		translate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
		box-shadow 0.3s;
}

.project-overview__sheet:nth-child(2) {
	z-index: 1;
	rotate: 1.5deg;
	translate: 0 var(--space-m);
}

.project-overview__sheet:nth-child(3) {
	z-index: 2;
	rotate: -1deg;
}

/* Picked up: straight, lifted, on top. */
.project-overview__sheet:hover {
	z-index: 3;
	rotate: 0deg;
	translate: 0 -12px;
}

/* Draft 01: lined notebook paper with an orange margin. */
.project-overview__sheet--lined {
	padding-left: 72px;
	background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(0, 0, 0, 0.07) 31px 32px);
	background-position: 0 14px;
}

.project-overview__sheet--lined::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 48px;
	width: 1px;
	background-color: color-mix(in srgb, var(--color-orange) 70%, transparent);
}

.project-overview__sheet--lined .project-overview__text {
	line-height: 32px;
}

/* Draft 02: the hero's dot grid. */
.project-overview__sheet--dotted {
	background-image: radial-gradient(circle, color-mix(in srgb, var(--color-ink) 14%, transparent) 1.4px, transparent 1.8px);
	background-size: 22px 22px;
}

/* Final: the dark rays card. */
.project-overview__sheet--final {
	background-color: var(--color-night);
	background-image: url("../images/ui/dark-light-rays.webp");
	background-position: right top;
	background-blend-mode: soft-light;
	color: var(--color-paper);
}

.project-overview__tag {
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	background-color: var(--color-mist);
	color: var(--color-ink);
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
}

.project-overview__tag--final {
	background-color: var(--color-orange);
}

.project-overview__title {
	font-size: var(--size-title-md);
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.1;
}

.project-overview__text {
	font-size: 19px;
	font-weight: 400;
	letter-spacing: -0.4px;
	line-height: 1.4;
	opacity: 0.85;
}

.project-overview__ticks {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	margin: var(--space-xs) 0 0;
	padding: 0;
	list-style: none;
}

.project-overview__ticks li {
	display: flex;
	gap: 10px;
	font-size: 16px;
	font-weight: 500;
}

.project-overview__ticks li::before {
	content: "✓";
	color: var(--color-orange);
	font-weight: 700;
}

.project-overview__stats {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
	margin: var(--space-xs) 0 0;
}

/* The number above its label. */
.project-overview__stat {
	display: flex;
	flex-direction: column-reverse;
	gap: 4px;
	padding-top: var(--space-s);
	border-top: 1px solid var(--color-line-light);
}

.project-overview__stat dd {
	margin: 0;
	color: var(--color-orange);
	font-size: clamp(48px, 4.5vw, 72px);
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1;
}

.project-overview__stat dt {
	font-size: 14px;
	font-weight: 500;
	opacity: 0.6;
}

/* A rubber stamp on the final sheet. */
.project-overview__stamp {
	position: absolute;
	right: var(--space-m);
	bottom: var(--space-m);
	padding: 6px 14px;
	border: 3px solid var(--color-orange);
	border-radius: 8px;
	color: var(--color-orange);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	opacity: 0.9;
	rotate: -12deg;
}

/* The text block's paragraphs (4. Blocks) share the old overview text style. */
.project-text__body p {
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: 17px;
	font-weight: 300;
	letter-spacing: -0.3px;
	line-height: 1.5;
	opacity: 0.75;
}

@media (max-width: 1200px) {
	.project-overview__sheet {
		min-height: 600px;
		padding-inline: var(--space-s);
	}

	.project-overview__sheet--lined {
		padding-left: 60px;
	}

	.project-overview__sheet--lined::before {
		left: 40px;
	}
}

/* Phones: the sheets stacked, slightly overlapping. */
@media (max-width: 810px) {
	.project-overview__desk {
		grid-template-columns: minmax(0, 1fr);
		padding-inline: 0;
	}

	.project-overview__sheet {
		min-height: 0;
		margin: 0;
		padding: var(--space-m);
		rotate: -1.5deg;
	}

	.project-overview__sheet + .project-overview__sheet {
		margin-top: calc(-1 * var(--space-s));
	}

	.project-overview__sheet:nth-child(2) {
		rotate: 1deg;
		translate: none;
	}

	.project-overview__sheet--lined {
		padding-left: 56px;
	}

	.project-overview__sheet--lined::before {
		left: 36px;
	}

	.project-overview__sheet--final {
		padding-bottom: 90px;
	}

	.project-overview__text {
		font-size: 17px;
	}

	.project-text__body p {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.project-overview__sheet {
		transition: none;
	}
}


/* 4. Blocks
   ========================================================================== */

/* Text: heading left, copy right. */
.project-text {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	align-items: start;
	gap: var(--space-xl);
}

.project-text__title {
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: var(--size-title-lg);
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.1;
}

.project-text__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-s);
}

/* Gallery: shared */
.project-gallery {
	display: grid;
	gap: var(--space-s);
	width: 100%;
}

.project-gallery__item {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-deep);
}

.project-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.project-gallery__item:hover img {
	transform: scale(1.04);
}

/* Browser: website screens in a light browser frame, alternating sides. */
.project-gallery--browser {
	gap: var(--space-l);
}

.project-gallery--browser .project-gallery__item {
	width: 82%;
	padding-top: 34px;
	background: #fff;
}

.project-gallery--browser .project-gallery__item:nth-child(even) {
	justify-self: end;
}

.project-gallery--browser img {
	aspect-ratio: 16 / 9;
	height: auto;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.project-gallery__bar {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 14px;
	border-bottom: 1px solid var(--color-line);
	background: var(--color-mist);
}

.project-gallery__bar i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #d6dbdb;
}

.project-gallery__bar i:first-child {
	background: #ff7a3b;
}

/* Grid: square posts. */
.project-gallery--grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-gallery--grid .project-gallery__item {
	aspect-ratio: 1 / 1;
}

/* Reels: 9:16 tiles with a play badge. */
.project-gallery--reels {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.project-gallery--reels .project-gallery__item {
	aspect-ratio: 9 / 16;
}

.project-gallery__play {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: var(--color-ink);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.project-gallery__play svg {
	width: 16px;
	height: 16px;
}

/* Wide: one image per row. */
.project-gallery--wide .project-gallery__item {
	aspect-ratio: 16 / 8;
}

/* Quote */
.project-quote {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: var(--space-l) 0;
	text-align: center;
}

.project-quote__text {
	margin: 0;
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: clamp(28px, 3.6vw, 52px);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1.15;
}

.project-quote__text::before {
	content: "“";
	color: #ff7a3b;
}

.project-quote__text::after {
	content: "”";
	color: #ff7a3b;
}

.project-quote__cite {
	margin-top: var(--space-m);
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 500;
	opacity: 0.5;
	text-transform: uppercase;
}

/* Selected: the work as cards — pages, posts or articles. The grid is
   never wider than the number of cards (--cols, set in the template). */
.project-selected {
	display: grid;
	grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
	gap: var(--space-m) var(--space-s);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-sans);
}

.project-pick {
	display: flex;
}

.project-pick__card {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-s);
	color: var(--color-ink);
	transition: translate 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

a.project-pick__card:hover {
	translate: 0 -5px;
}

.project-pick__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: scale 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

a.project-pick__card:hover .project-pick__image {
	scale: 1.04;
}

.project-pick__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.project-pick__meta {
	color: var(--color-orange);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
}

.project-pick__title {
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.1;
}

.project-pick__text {
	font-size: 15px;
	font-weight: 300;
	letter-spacing: -0.5px;
	line-height: 1.2;
	opacity: 0.7;
}

.project-pick__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-s);
	margin-top: var(--space-xs);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.5px;
	text-transform: uppercase;
}

/* Pages: a browser frame with the page address in the bar. */
.project-pick__frame {
	position: relative;
	display: block;
	padding-top: 34px;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--color-paper);
	box-shadow: var(--shadow-deep);
}

.project-pick__frame .project-pick__image {
	aspect-ratio: 16 / 10;
	height: auto;
	object-position: top;
}

.project-pick__bar {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 var(--space-s);
	border-bottom: 1px solid var(--color-line);
	background-color: var(--color-mist);
}

.project-pick__bar i {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--color-line);
}

.project-pick__bar i:first-child {
	background-color: var(--color-orange);
}

.project-pick__address {
	min-width: 0;
	margin-left: var(--space-s);
	padding: 2px var(--space-s);
	overflow: hidden;
	border-radius: var(--radius-pill);
	background-color: var(--color-paper);
	font-size: 12px;
	font-weight: 500;
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: 0.8;
}

/* Posts and articles: picture in a rounded card. */
.project-pick__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--color-mist);
	box-shadow: var(--shadow-deep);
}

.project-selected--posts .project-pick__media {
	aspect-ratio: 4 / 5;
}

/* Posts stay tile-sized however many there are: four to a row on desktop
   (two posts take half the row instead of stretching). */
.project-selected--posts:not(.is-single) {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.project-selected--articles .project-pick__media {
	aspect-ratio: 16 / 10;
}

.project-pick__meta--top {
	color: var(--color-ink);
	opacity: 0.6;
}

.project-pick__play {
	position: absolute;
	top: var(--space-s);
	right: var(--space-s);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--color-paper);
	box-shadow: var(--shadow-soft);
	color: var(--color-ink);
}

.project-pick__play svg {
	width: 16px;
	height: 16px;
}

/* Just one card: picture beside its text, not the full width. */
.project-selected.is-single .project-pick__card {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--space-l);
}

.project-selected--posts.is-single .project-pick__card {
	grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
}

/* The post's platform line sits with its text, not above the picture. */
.project-selected--posts.is-single .project-pick__meta--top {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
}

.project-selected--posts.is-single .project-pick__media {
	grid-row: 1 / span 2;
}

.project-selected--posts.is-single .project-pick__body {
	grid-column: 2;
	align-self: start;
}

/* Captions: two lines at most. */
.project-selected--posts .project-pick__text {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

@media (max-width: 1200px) {
	.project-text {
		gap: var(--space-l);
	}

	.project-gallery--reels {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Three or four across become two. */
	.project-selected {
		grid-template-columns: repeat(min(var(--cols, 2), 2), minmax(0, 1fr));
	}

	.project-selected--posts:not(.is-single) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 810px) {
	.project-text {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-s);
	}

	.project-gallery--browser .project-gallery__item {
		width: 100%;
	}

	.project-gallery--browser {
		gap: var(--space-m);
	}

	.project-gallery--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Pages and articles one per row; posts stay two across. */
	.project-selected--pages,
	.project-selected--articles {
		grid-template-columns: minmax(0, 1fr);
	}

	.project-pick__title {
		font-size: 18px;
	}

	.project-selected.is-single .project-pick__card,
	.project-selected--posts.is-single .project-pick__card {
		display: flex;
		gap: var(--space-s);
	}

	.project-pick__text {
		font-size: 14px;
	}

	.project-quote {
		padding: var(--space-m) 0;
	}
}


/* 5. Testimonial
   ========================================================================== */

.project-testimonial {
	position: relative;
	width: 100%;
	margin: 0;
	padding: var(--space-xl) var(--space-xl) var(--space-l);
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--color-night);
	background-image: url("../images/ui/dark-light-rays.webp");
	background-position: right top;
	background-blend-mode: soft-light;
	box-shadow: var(--shadow-deep);
}

.project-testimonial__mark {
	position: absolute;
	top: -20px;
	left: 30px;
	color: #ff7a3b;
	font-family: var(--font-sans);
	font-size: 200px;
	font-weight: 700;
	line-height: 1;
	opacity: 0.9;
}

.project-testimonial__quote {
	position: relative;
	max-width: 900px;
	margin: 0;
	color: var(--color-paper);
	font-family: var(--font-sans);
	font-size: clamp(24px, 2.6vw, 38px);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.2;
}

.project-testimonial__by {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: var(--space-l);
	font-family: var(--font-sans);
}

.project-testimonial__name {
	color: var(--color-paper);
	font-size: 16px;
	font-weight: 700;
}

.project-testimonial__role {
	color: var(--color-paper);
	font-size: 14px;
	font-weight: 300;
	opacity: 0.6;
}

@media (max-width: 810px) {
	.project-testimonial {
		padding: var(--space-xl) var(--space-m) var(--space-m);
	}

	.project-testimonial__mark {
		left: 16px;
		font-size: 140px;
	}
}


/* 6. Project navigation (previous · all · next) + call to action
   ========================================================================== */

/* Project navigation: previous · all projects · next, under a thin rule.
   Small cards (thumbnail + name), so it reads as navigation. */
.project-nav {
	display: flex;
	flex-direction: column;
	gap: var(--space-m);
	width: 100%;
	padding-top: var(--space-s);
	border-top: 1px solid var(--color-line);
	font-family: var(--font-sans);
}

.project-nav__label {
	color: var(--color-ink);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	opacity: 0.6;
}

.project-nav__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--space-s);
}

.project-nav__link {
	display: flex;
	align-items: center;
	gap: var(--space-m);
	min-width: 0;
	padding: var(--space-s);
	border-radius: var(--radius-lg);
	background-color: var(--color-mist);
	box-shadow: var(--shadow-soft);
	color: var(--color-ink);
	transition: background-color 0.3s, box-shadow 0.3s, translate 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-nav__link:hover,
.project-nav__link:focus-visible {
	background-color: var(--color-paper);
	box-shadow: var(--shadow-deep);
	translate: 0 -5px;
}

/* Next: mirrored, so it points out to the right. */
.project-nav__link--next {
	flex-direction: row-reverse;
	text-align: right;
}

.project-nav__thumb {
	flex-shrink: 0;
	width: 120px;
	aspect-ratio: 3 / 2;
	border-radius: var(--radius);
	object-fit: cover;
	box-shadow: var(--shadow-soft);
}

.project-nav__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-xs);
	min-width: 0;
}

.project-nav__dir {
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	opacity: 0.6;
}

.project-nav__dir span {
	color: var(--color-orange);
}

.project-nav__title {
	overflow: hidden;
	font-size: var(--size-title-md);
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.1;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.project-nav__arrow {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background-color: var(--color-ink);
	color: var(--color-paper);
	transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s;
}

.project-nav__link--prev .project-nav__arrow .icon {
	rotate: 180deg;
}

.project-nav__link:hover .project-nav__arrow {
	background-color: var(--color-orange);
	color: var(--color-ink);
}

.project-nav__link--prev:hover .project-nav__arrow {
	translate: -4px 0;
}

.project-nav__link--next:hover .project-nav__arrow {
	translate: 4px 0;
}

/* All projects: a small round button with a 2x2 grid icon. */
.project-nav__all {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
	padding: var(--space-s);
	color: var(--color-ink);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	white-space: nowrap;
}

.project-nav__grid {
	display: grid;
	grid-template-columns: repeat(2, 8px);
	place-content: center;
	gap: 4px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: var(--color-paper);
	box-shadow: var(--shadow-soft);
	transition: background-color 0.3s, box-shadow 0.3s;
}

.project-nav__grid i {
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background-color: var(--color-ink);
	transition: background-color 0.3s;
}

.project-nav__all:hover .project-nav__grid {
	background-color: var(--color-ink);
	box-shadow: var(--shadow-deep);
}

.project-nav__all:hover .project-nav__grid i {
	background-color: var(--color-paper);
}

.project-nav__all:hover .project-nav__grid i:first-child {
	background-color: var(--color-orange);
}

@media (max-width: 1200px) {
	.project-nav__thumb {
		width: 90px;
	}
}

/* Phones: previous and next stacked, "All projects" underneath. */
@media (max-width: 810px) {
	.project-nav__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.project-nav__all {
		flex-direction: row;
		justify-content: center;
		order: 3;
		gap: var(--space-s);
	}

	.project-nav__grid {
		width: 40px;
		height: 40px;
	}

	.project-nav__link {
		gap: var(--space-s);
	}

	.project-nav__thumb {
		width: 72px;
	}

	.project-nav__arrow {
		width: 40px;
		height: 40px;
	}
}

/* Call to action — same dark card as the other pages (Services, Portfolio). */
.project-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--space-m);
	width: 100%;
	margin-top: var(--space-l);
	padding: var(--space-xxl) var(--space-l);
	border-radius: var(--radius);
	background-color: var(--color-night);
	background-image: url("../images/ui/dark-light-rays.webp");
	background-position: right top;
	background-blend-mode: soft-light;
	box-shadow: var(--shadow-deep);
}

.project-cta__title {
	color: var(--color-paper);
	font-family: var(--font-sans);
	font-size: var(--size-title-lg);
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.1;
}

.project-cta__text {
	max-width: 520px;
	color: var(--color-paper);
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 300;
	letter-spacing: -0.5px;
	line-height: 1.2;
	opacity: 0.6;
}

.project-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-s);
	margin-top: var(--space-s);
}

.project-cta__button {
	padding: 0 var(--space-m);
}

@media (max-width: 810px) {
	.project-cta {
		padding: var(--space-l) var(--space-m);
	}

	.project-cta__text {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.project-nav__link:hover,
	.project-nav__link:focus-visible,
	.project-nav__link:hover .project-nav__arrow {
		translate: none;
	}
}

@media (max-width: 478px) {
	.project-cta {
		padding: var(--space-l) var(--space-s);
	}

	.project-cta__actions {
		width: 100%;
	}

	.project-cta__button {
		width: 100%;
		height: 45px;
	}
}