/*
 * Project case study.
 *
 * Reuses the site's own tokens, spacing scale and button styles, so a case
 * study reads as the same site rather than a second design. Nothing here
 * redefines a colour: every value comes from theme.css and follows the active
 * season with it.
 */

.pcase {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: clamp(96px, 10vw, 150px) var(--gut) clamp(64px, 8vw, 120px);
}

/* ---- breadcrumbs ---- */

.pcase__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-family: var(--mono);
	font-size: 12.5px;
	color: var(--muted);
	margin-block-end: clamp(28px, 4vw, 48px);
}

.pcase__crumbs a {
	color: var(--muted);
	text-decoration: none;
	border-block-end: 1px solid transparent;
}

.pcase__crumbs a:hover,
.pcase__crumbs a:focus-visible {
	color: var(--accent);
	border-block-end-color: var(--accent-mute);
}

.pcase__crumbs [aria-current="page"] {
	color: var(--text-2);
}

/* ---- head ---- */

.pcase__kick {
	font-family: var(--mono);
	font-size: 12.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 14px;
}

.pcase__h1 {
	font-size: clamp(30px, 4.6vw, 58px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 clamp(16px, 2vw, 24px);
	max-width: 20ch;
}

.pcase__lede {
	color: var(--text-2);
	font-size: clamp(16px, 1.35vw, 19px);
	line-height: 1.6;
	max-width: 68ch;
	margin: 0 0 clamp(28px, 4vw, 44px);
}

.pcase__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px;
	background: var(--line-soft);
	border: 1px solid var(--line-soft);
	margin: 0 0 clamp(28px, 4vw, 40px);
}

.pcase__fact {
	background: var(--panel);
	padding: 16px 18px;
}

.pcase__fact dt {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 6px;
}

.pcase__fact dd {
	margin: 0;
	color: var(--text);
	font-size: 15px;
	line-height: 1.45;
}

.pcase__cta {
	margin: 0;
}

.pcase__host {
	font-family: var(--mono);
	font-size: 12px;
	opacity: 0.72;
	margin-inline-start: 8px;
}

/* ---- written blocks ---- */

.pcase__blocks {
	margin-block-start: clamp(56px, 7vw, 96px);
	display: grid;
	gap: clamp(36px, 4.5vw, 60px);
}

.pcase__block h2,
.pcase__shots h2,
.pcase__stack h2 {
	font-size: clamp(20px, 2vw, 27px);
	letter-spacing: -0.01em;
	margin: 0 0 14px;
	padding-block-start: 14px;
	border-block-start: 1px solid var(--line);
}

.pcase__block p {
	color: var(--text-2);
	font-size: clamp(15.5px, 1.2vw, 17px);
	line-height: 1.72;
	max-width: 68ch;
	margin: 0 0 1em;
}

/*
 * The technical-decisions block is the one a hiring manager reads twice, so it
 * is set apart rather than left to look like every other paragraph.
 */
.pcase__block--decisions {
	border-inline-start: 2px solid var(--accent-mute);
	padding-inline-start: clamp(16px, 2vw, 26px);
}

.pcase__block--decisions h2 {
	border-block-start: 0;
	padding-block-start: 0;
	color: var(--accent-hi);
}

/* ---- the imported body ---- */

.pcase__body {
	margin-block-start: clamp(48px, 6vw, 80px);
	color: var(--text-2);
	font-size: clamp(15.5px, 1.2vw, 17px);
	line-height: 1.72;
	max-width: 72ch;
}

.pcase__body p {
	margin: 0 0 1.1em;
}

.pcase__body .project__n {
	font-family: var(--mono);
	font-size: 12.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 2em 0 0.8em;
}

.pcase__body .project__list {
	list-style: none;
	margin: 0 0 1.4em;
	padding: 0;
	display: grid;
	gap: 8px;
}

.pcase__body .project__list li {
	position: relative;
	padding-inline-start: 22px;
}

.pcase__body .project__list li::before {
	content: "\2713";
	position: absolute;
	inset-inline-start: 0;
	color: var(--ok, var(--accent));
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.7;
}

/* ---- captures ---- */

.pcase__shots {
	margin-block-start: clamp(56px, 7vw, 96px);
}

.pcase__shotgrid {
	display: grid;
	grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
}

.pcase__shot {
	margin: 0;
}

.pcase__shot figcaption {
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	margin-block-start: 10px;
}

.pcase__frame {
	border: 1px solid var(--line);
	background: var(--panel);
	overflow: hidden;
}

.pcase__bar {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 9px 14px;
	background: var(--panel-2);
	border-block-end: 1px solid var(--line-soft);
}

.pcase__dots {
	display: inline-flex;
	gap: 6px;
}

.pcase__dots i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--line);
}

.pcase__url {
	font-family: var(--mono);
	font-size: 11.5px;
	color: var(--muted);
}

/*
 * A real scroll container: the capture is a full-page screenshot, so the
 * visitor scrolls it the way they would scroll the site. Touch and keyboard
 * both work, and nothing traps the page.
 */
.pcase__scroll {
	max-height: min(70vh, 620px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.pcase__scroll:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

.pcase__scroll img {
	width: 100%;
	height: auto;
}

.pcase__phone {
	border: 1px solid var(--line);
	border-radius: 18px;
	background: var(--panel);
	padding: 10px;
	overflow: hidden;
}

.pcase__phone .pcase__scroll {
	border-radius: 10px;
	max-height: min(70vh, 620px);
}

/* ---- stack ---- */

.pcase__stack {
	margin-block-start: clamp(48px, 6vw, 80px);
}

.pcase__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.pcase__chips li {
	font-family: var(--mono);
	font-size: 12.5px;
	color: var(--text-2);
	border: 1px solid var(--line);
	padding: 6px 12px;
}

/* ---- visit ---- */

.pcase__visit {
	margin-block-start: clamp(44px, 5vw, 68px);
}

/* ---- prev / next ---- */

.pcase__nav {
	margin-block-start: clamp(56px, 7vw, 96px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1px;
	background: var(--line-soft);
	border: 1px solid var(--line-soft);
}

.pcase__navlink {
	display: block;
	background: var(--panel);
	padding: clamp(18px, 2.4vw, 26px);
	text-decoration: none;
	transition: background 0.2s var(--ease, ease);
}

.pcase__navlink:hover,
.pcase__navlink:focus-visible {
	background: var(--panel-2);
}

.pcase__navlink--next {
	text-align: end;
}

.pcase__navkick {
	display: block;
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	margin-block-end: 8px;
}

.pcase__navtitle {
	display: block;
	color: var(--text);
	font-size: clamp(16px, 1.5vw, 20px);
	line-height: 1.3;
}

.pcase__navlink:hover .pcase__navtitle {
	color: var(--accent-hi);
}

/* ---- contact ---- */

.pcase__contact {
	margin-block-start: clamp(56px, 7vw, 96px);
	padding-block-start: clamp(28px, 3.5vw, 44px);
	border-block-start: 1px solid var(--line);
}

.pcase__contactline {
	color: var(--text-2);
	font-size: clamp(16px, 1.4vw, 19px);
	margin: 0 0 18px;
}

.pcase__contact p:last-child {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

/* ---- narrow ---- */

@media (max-width: 860px) {
	.pcase__shotgrid {
		grid-template-columns: minmax(0, 1fr);
	}

	.pcase__shot--mobile {
		max-width: 340px;
	}

	.pcase__navlink--next {
		text-align: start;
	}
}

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

/* ============================================================
   Project archive — /projets/
   ============================================================ */

.parch {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: clamp(96px, 10vw, 150px) var(--gut) clamp(64px, 8vw, 120px);
}

.parch__head {
	margin-block-end: clamp(40px, 5vw, 72px);
}

.parch__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: clamp(20px, 2.6vw, 34px);
}

.parch__item {
	margin: 0;
}

.parch__card {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	background: var(--panel);
	overflow: hidden;
	transition: border-color 0.25s var(--ease, ease), transform 0.25s var(--ease, ease);
}

.parch__card:hover,
.parch__card:focus-within {
	border-color: var(--accent);
	transform: translateY(-3px);
}

.parch__thumb {
	aspect-ratio: 1200 / 630;
	overflow: hidden;
	border-block-end: 1px solid var(--line-soft);
	background: var(--panel-2);
}

.parch__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.parch__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: clamp(18px, 2vw, 24px);
	flex: 1;
}

.parch__title {
	font-size: clamp(18px, 1.7vw, 23px);
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0;
}

.parch__title a {
	color: var(--text);
	text-decoration: none;
}

/*
 * One link per card: the anchor is stretched over the whole card, so the
 * accessible name stays the project title and nothing else is focusable.
 */
.parch__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.parch__card:hover .parch__title a,
.parch__title a:focus-visible {
	color: var(--accent-hi);
}

.parch__host {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--muted);
	margin: 0;
}

.parch__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.parch__chips span {
	font-family: var(--mono);
	font-size: 11px;
	line-height: 1.5;
	color: var(--text-2);
	border: 1px solid var(--line);
	padding: 4px 9px;
}

.parch__sum {
	color: var(--text-2);
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0;
}

.parch__more {
	margin: auto 0 0;
	padding-block-start: 6px;
	font-family: var(--mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
}

.parch__more::after {
	content: " \2192";
}

.parch__empty {
	color: var(--text-2);
}

@media (prefers-reduced-motion: reduce) {
	.parch__card,
	.parch__card:hover,
	.parch__card:focus-within {
		transition: none;
		transform: none;
	}
}