.page-hero {
	padding-block: clamp(12rem, 4rem + 8vw, 12rem) 2rem;
	border-block-end: 1px solid var(--color-line);
	position: relative;
	overflow: hidden;
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero h1 { font-size: var(--step-3xl); font-weight: 500; letter-spacing: -0.035em; max-width: 18ch; }
.page-hero h1 em { color: var(--color-accent); font-style: italic; font-weight: 400; }
.page-hero p { color: var(--color-fg-muted); margin-block-start: var(--space-md); max-width: 56ch; font-size: var(--step-sm); }
.page-hero__crumb { font-family: var(--font-mono); font-size: var(--step-2xs); color: var(--color-fg-dim); letter-spacing: 0.14em; text-transform: uppercase; margin-block-end: var(--space-md); }
.page-hero__crumb a:hover { color: var(--color-accent); }

/* Contact form */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; }
.contact-form { display: grid; gap: var(--space-md); }
.field { display: grid; gap: var(--space-2xs); }
.field label { font-family: var(--font-mono); font-size: var(--step-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-fg-muted); }
.field input, .field textarea, .field select {
	background: transparent;
	border: 0;
	border-block-end: 1px solid var(--color-line-strong);
	padding: 0.7em 0.2em;
	font-family: var(--font-sans);
	font-size: var(--step-sm);
	color: var(--color-fg);
	transition: border-color var(--dur) var(--ease-out);
	border-radius: 0;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--color-accent); }
.field textarea { resize: vertical; min-height: 120px; }
.contact-aside { display: grid; gap: var(--space-md); align-content: start; }
.contact-aside .block { padding: var(--space-lg); border: 1px solid var(--color-line); border-radius: var(--radius); }
.contact-aside .block h4 { font-family: var(--font-mono); font-size: var(--step-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-block-end: var(--space-xs); }
.contact-aside .block p { color: var(--color-fg-muted); font-size: var(--step-sm); }
.contact-aside .block a { color: var(--color-fg); border-block-end: 1px solid var(--color-line-strong); }

@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

/* Hosting cards */
.host-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.host-card { border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-lg); display: grid; gap: var(--space-sm); align-content: start; min-height: 280px; transition: border-color var(--dur), background var(--dur); }
.host-card:hover { border-color: var(--color-line-strong); background: var(--color-bg-raised); }
.host-card .icon { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--color-line-strong); display: grid; place-items: center; color: var(--color-accent); }
.host-card h3 { font-size: var(--step-lg); font-weight: 500; }
.host-card p { color: var(--color-fg-muted); font-size: var(--step-xs); }
.host-card ul { display: grid; gap: var(--space-2xs); margin-block-start: var(--space-2xs); }
.host-card li { font-size: var(--step-xs); color: var(--color-fg-muted); display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xs); }
.host-card li::before { content: "→"; color: var(--color-accent); font-family: var(--font-mono); }

@media (max-width: 880px) { .host-grid { grid-template-columns: 1fr; } }

/* Realisations list */
.work-list { display: grid; gap: 0; border-block: 1px solid var(--color-line); }
.work-item {
	display: grid;
	grid-template-columns: auto 1fr 1.4fr auto;
	gap: var(--space-lg);
	align-items: center;
	padding-block: var(--space-lg);
	border-block-end: 1px solid var(--color-line);
	transition: background var(--dur) var(--ease-out), padding var(--dur) var(--ease-out);
	cursor: pointer;
}
.work-item:last-child { border-block-end: 0; }
.work-item:hover { background: var(--color-bg-raised); padding-inline-start: var(--space-sm); padding-inline-end: var(--space-sm); }
.work-item__year { font-family: var(--font-mono); font-size: var(--step-sm); color: var(--color-fg-dim); letter-spacing: 0.06em; }
.work-item__name { font-size: var(--step-lg); font-weight: 500; letter-spacing: -0.02em; }
.work-item__name .tag { font-family: var(--font-mono); font-size: var(--step-2xs); color: var(--color-accent); padding: 0.2em 0.7em; border: 1px solid var(--color-accent); border-radius: var(--radius-pill); margin-inline-start: var(--space-2xs); letter-spacing: 0.08em; text-transform: uppercase; }
.work-item__desc { color: var(--color-fg-muted); font-size: var(--step-xs); }
.work-item__arrow { color: var(--color-fg-dim); transition: transform var(--dur) var(--ease-out), color var(--dur); }
.work-item:hover .work-item__arrow { transform: translateX(6px); color: var(--color-accent); }

@media (max-width: 760px) {
	.work-item { grid-template-columns: 1fr; gap: var(--space-xs); padding-block: var(--space-md); }
}

section#contact {
	padding-block: 4rem 4rem;
	background: var(--color-bg-raised);
}

/* ---- Contact form: states + feedback --------------------------- */

/* Honeypot: visually hidden but present for bots. */
.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* Submit row: button + status region stacked sensibly on small screens */
.contact-form__submit-row {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	flex-wrap: nowrap;
	margin-block-start: var(--space-2xs);
}

/* Button internals: label, spinner, arrow */
.btn .btn__spinner {
	display: none;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-block-end-color: transparent;
	border-radius: 50%;
	margin-inline-end: 0.4em;
	animation: contact-spin 0.7s linear infinite;
}
.contact-form.is-submitting .btn .btn__spinner { display: inline-block; }
.contact-form.is-submitting .btn .btn__label,
.contact-form.is-submitting .btn .btn-arrow { opacity: 0.45; }
@keyframes contact-spin { to { transform: rotate(360deg); } }

/* Invalid field: accent underline + gentle shake on supported motion */
.field.is-invalid input,
.field.is-invalid textarea,
.field.is-invalid select {
	border-block-end-color: red;
}
.field.is-invalid label { color: var(--color-accent); }
@media (prefers-reduced-motion: no-preference) {
	.field.is-invalid input,
	.field.is-invalid textarea,
	.field.is-invalid select {
		animation: contact-shake 0.4s var(--ease-in-out);
	}
}
@keyframes contact-shake {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-4px); }
	75%      { transform: translateX(4px); }
}

/* Status region */
.contact-status {
	--cs-color: var(--color-fg-muted);
	--cs-border: var(--color-line);
	display: none;
	align-items: center;
	gap: 0.6em;
	font-family: var(--font-mono);
	font-size: var(--step-sm);
	color: var(--cs-color);
	padding: 0.5em 0;
	min-height: 0;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--dur) var(--ease-out),
	            transform var(--dur) var(--ease-out),
	            max-height var(--dur) var(--ease-out),
	            padding var(--dur) var(--ease-out),
	            color var(--dur) var(--ease-out);
}
.contact-status.is-visible {
	display: inline-flex;
	opacity: 1;
	transform: none;
	max-height: 6em;
	padding: 0.5em 0;
}

.contact-status__icon {
	display: inline-grid;
	place-items: center;
	width: 1.5em;
	height: 1.5em;
	border-radius: 50%;
	border: 1px solid currentColor;
	font-size: 0.85em;
	font-weight: 600;
	line-height: 1;
	flex: 0 0 auto;
}

.contact-status.is-success {
	--cs-color: green;
	--cs-border: green;
}
.contact-status.is-error {
	--cs-color: red;
	--cs-border: red;
}
.contact-status.is-success .contact-status__icon {
	border-color: green;
	color: green;
	background: none;
}
.contact-status.is-error .contact-status__icon {
	border-color: red;
	color: red;
	background: none;
}

/* Success: replace the form with a confirmation panel */
.contact-success {
	display: none;
	grid-template-rows: auto auto auto;
	justify-items: center;
	align-content: center;
	gap: var(--space-md);
	min-height: 320px;
	text-align: center;
	padding-block: var(--space-xl);
}
.contact-success[hidden] { display: none; }
.contact-success__check {
	display: grid;
	place-items: center;
	width: clamp(56px, 4rem + 4vw, 88px);
	height: clamp(56px, 4rem + 4vw, 88px);
	border-radius: 50%;
	border: 2px solid var(--color-accent);
	color: var(--color-accent);
	font-size: var(--step-2xl);
	font-weight: 600;
	line-height: 1;
}
.contact-success__title {
	font-size: var(--step-xl);
	font-weight: 500;
	letter-spacing: -0.025em;
	color: var(--color-fg-muted);
}
.contact-success__text {
	font-size: var(--step-md);
	color: var(--color-fg);
	max-width: 40ch;
}

@media (prefers-reduced-motion: reduce) {
	.contact-status { transition: none; transform: none; }
	.btn .btn__spinner { animation: none; }
}

/* ===================================================================
	 404 — Not found
	 =================================================================== */

.notfound { padding-block: clamp(6rem, 4rem + 8vw, 10rem) clamp(4rem, 3rem + 4vw, 7rem); }

.notfound__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(60% 70% at 30% 20%, var(--color-accent-soft), transparent 65%),
		radial-gradient(50% 60% at 80% 90%, var(--color-control-soft), transparent 70%);
	pointer-events: none;
	opacity: 0.7;
}

.notfound__inner { position: relative; z-index: 1; display: grid; gap: var(--space-lg); justify-items: start; }

/* Giant 404 — fluid, glitchy */
.notfound__code {
	font-family: var(--font-mono);
	font-size: clamp(7rem, 22vw, 18rem);
	font-weight: 600;
	line-height: 0.85;
	letter-spacing: -0.06em;
	color: var(--color-fg);
	position: relative;
	margin-block-end: var(--space-xs);
	background: linear-gradient(180deg, var(--color-fg) 0%, color-mix(in srgb, var(--color-fg) 35%, transparent) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Glitch layers via duplicated pseudo elements */
.notfound__code::before,
.notfound__code::after {
	content: "404";
	position: absolute;
	inset: 0;
	background: none;
	-webkit-background-clip: initial;
	background-clip: initial;
	-webkit-text-fill-color: initial;
	opacity: 0.85;
}
.notfound__code::before {
	color: var(--color-accent);
	mix-blend-mode: screen;
	animation: notfound-glitch-a 3.4s infinite steps(2, jump-none);
	clip-path: inset(0 0 55% 0);
}
.notfound__code::after {
	color: var(--color-control);
	mix-blend-mode: screen;
	animation: notfound-glitch-b 2.8s infinite steps(2, jump-none);
	clip-path: inset(55% 0 0 0);
}

@keyframes notfound-glitch-a {
	0%, 92%, 100% { transform: translate(0, 0); }
	93% { transform: translate(-3px, 1px); }
	95% { transform: translate(2px, -1px); }
	97% { transform: translate(-1px, 2px); }
}
@keyframes notfound-glitch-b {
	0%, 90%, 100% { transform: translate(0, 0); }
	91% { transform: translate(2px, -1px); }
	94% { transform: translate(-2px, 1px); }
	96% { transform: translate(1px, -2px); }
}

/* Bilingual blocks */
.notfound__blocks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: start;
	width: 100%;
	max-width: var(--container-narrow);
}
.notfound__block--fr h1 {
	font-size: var(--step-xl);
	font-weight: 500;
	letter-spacing: -0.035em;
	max-width: 18ch;
}
.notfound__block--fr h1 em,
.notfound__block--en h2 em {
	color: var(--color-accent);
	font-style: italic;
	font-weight: 400;
}
.notfound__block--fr p {
	color: var(--color-fg-muted);
	margin-block-start: var(--space-sm);
	max-width: 42ch;
	font-size: var(--step-sm);
}

/* English block — secondary, muted */
.notfound__block--en {
	border-inline-start: 1px solid var(--color-line);
	padding-inline-start: var(--space-lg);
}
.notfound__block--en .notfound__lang { margin-block-end: var(--space-sm); }
.notfound__block--en h2 {
	font-size: var(--step-lg);
	font-weight: 500;
	letter-spacing: -0.03em;
	max-width: 18ch;
	color: var(--color-fg-muted);
}
.notfound__block--en p {
	color: var(--color-fg-dim);
	margin-block-start: var(--space-sm);
	max-width: 42ch;
	font-size: var(--step-xs);
}

/* CTA row */
.notfound__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-block-start: var(--space-sm);
}

/* Responsive — collapse to stacked below 880px */
@media (max-width: 880px) {
	.notfound__blocks {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}
	.notfound__block--en {
		border-inline-start: 0;
		border-block-start: 1px solid var(--color-line);
		padding-inline-start: 0;
		padding-block-start: var(--space-md);
	}
}

@media (max-width: 400px) {
	.notfound__code { font-size: clamp(5.5rem, 28vw, 9rem); }
}

@media (prefers-reduced-motion: reduce) {
	.notfound__code::before,
	.notfound__code::after { animation: none; opacity: 0.5; }
}