/* Self-hosted so the fonts arrive before first paint — no late swap, so
   no layout shift from text reflowing once they load. Filenames match
   google-webfonts-helper's output; adjust the version numbers (v27/v53)
   to whatever your download actually produced. */
@font-face {
	font-family: 'Anton';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/anton-v27-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/oswald-v57-latin-300.woff2') format('woff2');
}
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/oswald-v57-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/oswald-v57-latin-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/oswald-v57-latin-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/oswald-v57-latin-700.woff2') format('woff2');
}

/* ==========================================================================
   Studio 5LBS — design tokens
   Monochrome, matching the live site: near-black background, off-white
   type, no colour accent. Anton (huge condensed display, used both solid
   and as an outline/stroke treatment) + Oswald (body, nav, labels).
   ========================================================================== */

:root {
	--ink: #0b0b0a;
	--ink-soft: #171614;
	--paper: #f5f4f0;
	--muted: #8a8a8a;
	--line: rgba(245, 244, 240, 0.16);
	--line-strong: rgba(245, 244, 240, 0.32);

	--font-display: "Anton", ui-sans-serif, system-ui, sans-serif;
	--font-body: "Oswald", ui-sans-serif, system-ui, sans-serif;

	--wrap: 1280px;
	--gutter: clamp(1.25rem, 4vw, 2.5rem);
	--sidebar-w: clamp(84px, 7vw, 112px);
	--topbar-h: 64px;
}

@media (max-width: 480px) {
	:root { --sidebar-w: 64px; }
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
	margin: 0;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
body.nav-is-open { overflow: hidden; }

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
h1, h2, h3, dl, dd { margin: 0; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
input { font: inherit; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--paper); color: var(--ink); padding: 0.75em 1.25em;
	font-family: var(--font-body); font-weight: 700; font-size: 0.85rem;
}
.skip-link:focus { left: var(--gutter); top: var(--gutter); }

:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

/* ==========================================================================
   Type
   ========================================================================== */

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: 0.95; letter-spacing: 0.01em; }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { font-size: 1.4rem; }

.eyebrow {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--muted);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.button {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 1em 1.5em;
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--paper);
	transition: background 0.15s ease, color 0.15s ease;
}
.button:hover, .button:focus-visible { background: transparent; color: var(--paper); }
.button--ghost { background: transparent; color: var(--paper); }
.button--ghost:hover, .button--ghost:focus-visible { background: var(--paper); color: var(--ink); }

/* ==========================================================================
   Layout shell: sidebar column (logo + hamburger) + content column
   ========================================================================== */

.site { display: flex; min-height: 100vh; }

.site-sidebar {
	flex: 0 0 var(--sidebar-w);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	border-right: 1px solid var(--line);
	position: sticky;
	top: 0;
	height: 100vh;
	z-index: 150;
}

.site-content { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }

.site-main { min-width: 0; }

.site-branding { margin: 0; }
.site-branding .custom-logo-link,
.site-branding__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	background: var(--paper);
}
.site-branding img, .site-branding svg { width: 60%; height: 60%; object-fit: contain; }
.site-branding__text { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--ink); text-transform: uppercase; text-align: center; }

.nav-toggle {
	position: relative;
	z-index: 500;
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--paper);
	border-bottom: 1px solid var(--line);
}
.nav-toggle__icon { display: flex; flex-direction: column; gap: 10px; width: 30px; }
.nav-toggle__icon span { display: block; height: 2px; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(2) { opacity: 0; }

@media (max-width: 700px) {
	.site { flex-direction: column; }
	.site-sidebar {
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: var(--topbar-h);
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}
	.site-branding .custom-logo-link,
	.site-branding__link {
		width: var(--topbar-h);
		height: var(--topbar-h);
	}
	.nav-toggle {
		width: var(--topbar-h);
		height: var(--topbar-h);
		margin-left: auto;
		border-bottom: 0;
		border-left: 1px solid var(--line);
	}
}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
	position: fixed;
	inset: 0;
	z-index: 400;
	background: var(--ink);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.25s ease, visibility 0.25s ease;
	display: flex;
	align-items: center;
}
.site-nav.is-open { visibility: visible; opacity: 1; }
.site-nav__inner { position: relative; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); width: 100%; }

.site-nav__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	margin: 0 0 0.5rem 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--font-display);
	font-size: clamp(4rem, 11vw, 10rem);
	line-height: 1;
	-webkit-text-stroke: 1.5px var(--paper);
	color: transparent;
	transition: color 0.15s ease;
}
.site-nav__close:hover, .site-nav__close:focus-visible { color: var(--paper); }

.site-nav .nav-menu { display: flex; flex-direction: column; gap: 0.5rem; }
.site-nav .nav-menu a {
	display: inline-block;
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 8vw, 5.5rem);
	text-transform: uppercase;
	line-height: 1.05;
	-webkit-text-stroke: 1.5px var(--paper);
	color: transparent;
	transition: color 0.15s ease;
}
.site-nav .nav-menu a:hover,
.site-nav .nav-menu a:focus-visible,
.site-nav .nav-menu a[aria-current="page"] { color: var(--paper); }

.site-nav__contact { margin-top: 2rem; font-family: var(--font-body); font-size: 0.95rem; }
.site-nav__contact a { text-decoration: underline; text-underline-offset: 3px; }
.site-nav__contact a:hover { color: var(--muted); }

/* ==========================================================================
   Hero (front page): split layout + rotated portfolio rail
   ========================================================================== */

.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	overflow: hidden;
}

.hero__content {
	position: relative;
	z-index: 1;
	flex: 1 1 480px;
	min-width: 0;
	padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 4rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 720px;
}

.hero__eyebrow { margin-bottom: 1.25rem; }

.hero__title {
	display: flex;
	align-items: flex-start;
	gap: clamp(1.25rem, 3.5vw, 2.5rem);
	margin-bottom: 1.75rem;
	min-width: 0;
	width: 100%;
}
.hero__title-text { display: flex; gap: clamp(1.25rem, 0.5vw, 2.5rem); min-width: 0; }
.hero__acronym, .hero__words { display: flex; flex-direction: column; justify-content: space-between; }
.hero__acronym span, .hero__words span {
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 6vw, 4.25rem);
	line-height: 1.02;
}
.hero__acronym span { color: var(--paper); }
.hero__words span { -webkit-text-stroke: 1.25px var(--paper); color: transparent; }

/* BOTH dimensions are fixed here, deliberately. Any of these — width:auto,
   a percentage height, or sizing off the title text — leaves the box
   indeterminate until the SVG or the webfont has loaded, and the browser
   then has to re-lay-out once it knows: that late correction is exactly
   what PageSpeed reported as "élément d'image de taille inconnue" and
   scored as layout shift. 202px is 250px × the SVG's own ratio
   (224.28 / 277.14), so the reserved box matches the artwork exactly.
   max-width is safe to keep — it resolves from the viewport, which is
   known immediately. */
.hero__mark-wrap {
	display: block;
	flex-shrink: 0;
	width: 202px;
	height: 250px;
	max-width: 32vw;
	overflow: hidden;
}
.hero__mark {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
	opacity: 0.35;
	pointer-events: none;
}

.hero__entry { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 1.5rem; margin-bottom: 1.75rem; }
.hero__entry-term { font-weight: 700; margin: 0 0 0.6rem; }
.hero__entry-tag { font-style: italic; font-weight: 400; color: var(--muted); margin-left: 0.4em; }
.hero__entry-def { margin: 0; max-width: 56ch; color: var(--muted); overflow-wrap: break-word; }

.hero__lede { font-size: 1rem; max-width: 56ch; overflow-wrap: break-word; }
.hero__lede strong { -webkit-text-stroke: 0.6px var(--paper); }

.hero__services { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0; }
.hero__services a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-block: 0.65rem;
	border-top: 1px solid var(--line);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
}
.hero__services li:last-child a { border-bottom: 1px solid var(--line); }
.hero__services a::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line-strong); }
.hero__services a:hover, .hero__services a:focus-visible { color: var(--muted); }

/* ---- Portfolio: vertical rail (stacked titles) + persistent showcase ---- */

.hero__portfolio {
	position: relative;
	z-index: 1;
	flex: 1 1 480px;
	display: flex;
	border-left: 1px solid var(--line);
}

.hero__rail {
	flex: 0 0 clamp(220px, 22vw, 320px);
	height: 100vh;
	max-height: 100vh;
	background: var(--ink);
	border-right: 1px solid var(--line);
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.hero__rail::-webkit-scrollbar { display: none; }

.rail-item {
	all: unset;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 2rem 1rem;
	box-sizing: border-box;
	border-bottom: 1px solid var(--line);
	cursor: pointer;
	transition: background 0.2s ease;
}
.rail-item:hover, .rail-item:focus-visible, .rail-item.is-active { background: rgba(245, 244, 240, 0.05); }
.rail-item:focus-visible { outline: 2px solid var(--paper); outline-offset: -3px; }

/* Deliberately NOT using writing-mode here: its interaction with flex
   flex-direction row/column is inconsistent enough across real browsers
   that it isn't reliable. Instead: a completely normal (horizontal-tb)
   flex column, sized purely by content — each line is individually
   rotated via transform, which is purely visual and doesn't touch how
   anything is positioned or sized by itself. What DOES make the sizing
   work is the wrap elements below: JS measures each rotated line's true
   rendered box and applies it explicitly, so the column stacks them
   without guessing at rotation geometry. */
.rail-item__frame {
	display: flex;
	flex-direction: inherit;
	align-items: center;
	gap: 0.85rem;
}

.rail-item__title-wrap,
.rail-item__cat-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}
.rail-item__title-wrap { min-height: 200px; }
.rail-item__cat-wrap { min-height: 90px; }

.rail-item__title {
	transform: rotate(-90deg);
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 4vw, 3.75rem);
	line-height: 0.92;
	-webkit-text-stroke: 1px var(--paper);
	color: transparent;
	white-space: nowrap;
	transition: color 0.2s ease;
}
.rail-item:hover .rail-item__title,
.rail-item:focus-visible .rail-item__title,
.rail-item.is-active .rail-item__title { color: var(--paper); }

.rail-item__cat {
	transform: rotate(-90deg);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
}

/* ---- Showcase: stays put, swaps content to match the active rail item.
   The link to the project's page lives here (on the image), not on the
   rail items, which only activate/reorder on click. ---- */

.hero__showcase {
	position: sticky;
	top: 0;
	flex: 1 1 auto;
	height: 100vh;
	overflow: hidden;
	background-color: var(--ink-soft);
	background-image: radial-gradient(circle at 15% 20%, rgba(245, 244, 240, 0.06), transparent 45%);
}

.hero__showcase-link { position: absolute; inset: 0; display: block; }

.hero__showcase-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
	opacity: 0;
	transform: scale(1.02);
	transition: opacity 0.45s ease, transform 0.6s ease;
}
.hero__showcase-media.is-visible { opacity: 1; transform: scale(1); }

.hero__showcase-caption {
	position: absolute;
	left: var(--gutter);
	bottom: var(--gutter);
	z-index: 1;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.hero__showcase-caption.is-visible { opacity: 1; transform: translateY(0); }
.hero__showcase-cat { font-family: var(--font-body); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.hero__showcase-title { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 3rem); text-transform: uppercase; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6); }

@media (max-width: 900px) {
	.site-nav__inner { text-align: center; }
	.site-nav__close { margin-inline: auto; }
	.site-nav .nav-menu { align-items: center; }
}

@media (max-width: 700px) {
	.hero__title { flex-wrap: wrap; }
	.hero__mark-wrap { order: 10; width: 130px; height: 160px; max-width: 40%; margin-top: 0.5rem; }
}

@media (max-width: 900px) {
	.hero { flex-direction: column; min-height: 0; }
	.hero__content { max-width: none; width: 100%; }
	.hero__portfolio { flex-direction: column; border-left: 0; border-top: 1px solid var(--line); }
	.hero__rail {
		flex-basis: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: auto;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}
	.rail-item {
		flex: 0 0 auto;
		width: auto;
		padding: 1.25rem 1.5rem;
		border-bottom: 0;
		border-right: 1px solid var(--line);
		scroll-snap-align: start;
	}
	.rail-item__frame { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
	.rail-item__title-wrap,
	.rail-item__cat-wrap {
		width: auto !important;
		height: auto !important;
		min-height: 0px;
	}
	.rail-item__title {
		transform: none;
		font-size: clamp(1.5rem, 6vw, 2rem);
		white-space: nowrap;
	}
	.rail-item__cat { transform: none; white-space: nowrap; }
	.hero__showcase { position: relative; height: 60vh; }
}

/* ==========================================================================
   Section head / portfolio grid (archive, taxonomy, homepage-adjacent)
   ========================================================================== */

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 3rem 1.5rem; flex-wrap: wrap; }
.section-head__link { font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: underline; text-underline-offset: 3px; }

.portfolio-filters { border-bottom: 1px solid var(--line); }
.portfolio-filters ul { display: flex; flex-wrap: wrap; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.portfolio-filters a {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 1.1rem 1.1rem;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	color: var(--muted);
}
.portfolio-filters a:hover { color: var(--paper); }
.portfolio-filters a[aria-current="page"] { border-color: var(--paper); color: var(--paper); }

.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: clamp(1rem, 2vw, 2rem);
	padding-block: 2.5rem;
}

.portfolio-card { position: relative; }
.portfolio-card__link { display: block; }
.portfolio-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-soft); border: 1px solid var(--line); transition: filter 0.3s ease; }
.portfolio-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.portfolio-card__link:hover .portfolio-card__media img,
.portfolio-card__link:focus-visible .portfolio-card__media img { transform: scale(1.04); }

.portfolio-card__body { display: block; padding-top: 0.9rem; }
.portfolio-card__title { display: block; font-family: var(--font-display); font-size: 1.35rem; text-transform: uppercase; }
.portfolio-card__cat { display: inline-block; margin-top: 0.35rem; font-family: var(--font-body); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumbs { border-bottom: 1px solid var(--line); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.4em; max-width: var(--wrap); margin-inline: auto; padding: 1.5rem var(--gutter) 0.85rem; font-family: var(--font-body); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 0.4em; opacity: 0.5; }
.breadcrumbs a:hover { color: var(--paper); }
.breadcrumbs [aria-current="page"] { color: var(--paper); }

/* ==========================================================================
   Generic page header
   ========================================================================== */

.page-header { padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem; }
.page-header__lede { max-width: 62ch; font-size: 1.1rem; color: var(--muted); }


/* ==========================================================================
   About page
   ========================================================================== */

.team__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; border-top: 1px solid var(--line); padding-top: 2rem; }
.team__member { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.team__name { font-size: 1.5rem; }
.team__role { font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0.5rem 0; }
.team__link a { text-decoration: underline; text-underline-offset: 3px; }
.team__link a:hover { color: var(--muted); }

.about__layout { display: flex; align-items: flex-start; gap: clamp(2rem, 5vw, 4rem); padding-block: clamp(2rem, 5vw, 3rem) 3rem; }
.about__content { flex: 1 1 46%; min-width: 0; max-width: 560px; }
.about__content h1 { margin-bottom: 1.25rem; }
.about__lede { font-size: 1.05rem; max-width: 56ch; margin-bottom: 2rem; }

.about__media {
	flex: 1 1 46%;
	min-width: 0;
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--line);
}
.about__photo { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ink-soft); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.about__mark { grid-column: span 1; align-self: end; width: 100%; opacity: 0.25; pointer-events: none; }

@media (max-width: 900px) {
	.about__layout { flex-direction: column; }
	.about__content { max-width: none; }
	.about__media { width: 100%; }
}

/* ==========================================================================
   Single project
   ========================================================================== */

.project__layout {
	display: flex;
	align-items: flex-start;
	gap: clamp(2rem, 5vw, 4rem);
	padding-block: clamp(2rem, 5vw, 3rem) 3rem;
}

.project__media { flex: 1 1 58%; min-width: 0; display: flex; flex-direction: column; gap: clamp(1rem, 2.5vw, 1.75rem); }
.project__image { margin: 0; filter: grayscale(0.15); }
.project__image img { width: 100%; display: block; }

.project__info {
	flex: 1 1 34%;
	min-width: 0;
	max-width: 480px;
	position: sticky;
	top: clamp(1.5rem, 4vw, 3rem);
}

.project__cat { margin-bottom: 0.75rem; }
.project__cat a:hover { color: var(--paper); }
.project__title { font-size: clamp(2rem, 4.5vw, 3.25rem); margin-bottom: 1.5rem; }

.project__desc { max-width: 60ch; font-size: 1.02rem; padding-bottom: 0.5rem; }
.project__desc p:last-child { margin-bottom: 0; }

.project__list { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.project__list-title { font-family: var(--font-display); font-size: 1.15rem; text-transform: uppercase; margin-bottom: 1rem; }
.project__list ul { display: flex; flex-direction: column; gap: 0.6rem; }
.project__list li { position: relative; padding-left: 1.5em; font-size: 0.95rem; }
.project__list li::before { content: "—"; position: absolute; left: 0; color: var(--muted); }

@media (max-width: 900px) {
	.project__layout { flex-direction: column; }
	.project__info { position: static; max-width: none; }
}

.project__next { border-top: 1px solid var(--line); padding-block: 2.5rem 4rem; }
.project__next-label { font-family: var(--font-body); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); display: block; margin-bottom: 0.5rem; }
.project__next-title { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 4rem); text-transform: uppercase; }
.project__next a:hover .project__next-title, .project__next a:focus-visible .project__next-title { color: var(--muted); }

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination { padding-block: 1rem 4rem; }
.pagination ul { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.pagination a, .pagination span {
	display: inline-flex; align-items: center; justify-content: center; min-width: 2.25em;
	padding: 0.5em 0.75em; font-family: var(--font-body); font-weight: 700; font-size: 0.85rem;
	border: 1px solid var(--line);
}
.pagination .current { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.pagination a:hover { border-color: var(--paper); }

/* ==========================================================================
   Generic page content / 404 / blog fallback
   ========================================================================== */

.page-content__body, .page-content__thumbnail { padding-bottom: 3rem; }
.page-content__body { max-width: 68ch; font-size: 1.05rem; }

.not-found { text-align: center; padding-top: clamp(2rem, 6vw, 3rem); }
.not-found__links { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }

.post-list { padding-block: 2rem 4rem; display: grid; gap: 2rem; }
.post-list__item { border-top: 1px solid var(--line); padding-top: 1.5rem; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { border-top: 1px solid var(--line); margin-top: 0; }
.site-footer__inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; padding-block: 3rem 2rem; }
.site-footer__logo { font-family: var(--font-display); font-size: 1.3rem; text-transform: uppercase; margin-bottom: 0.35rem; }
.site-footer__tagline { font-family: var(--font-body); font-size: 0.8rem; color: var(--muted); }
.site-footer__nav .nav-menu { display: flex; flex-direction: column; gap: 0.6rem; }
.site-footer__nav a:hover { color: var(--muted); }
.site-footer__contact { font-style: normal; display: flex; flex-direction: column; gap: 0.5rem; font-family: var(--font-body); font-size: 0.85rem; }
.site-footer__contact a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__contact a:hover { color: var(--muted); }
.site-footer__legal { font-family: var(--font-body); font-size: 0.72rem; color: var(--muted); padding-block: 1.25rem; text-align: center; border-top: 1px solid var(--line); }

@media (max-width: 720px) {
	.site-footer__inner { grid-template-columns: 1fr; text-align: center; }
	.site-footer__nav .nav-menu { align-items: center; }
	.site-footer__contact { align-items: center; }
}