/* Mandia — landing page.
 *
 * The visual world is the mairie counter: a ruled administrative register,
 * violet stamp ink, typewritten file references. Courier Prime appears only
 * on real data (file references, dates, deadlines) because that is the
 * vernacular of a récépissé, never as decoration.
 */

:root {
	color-scheme: light;

	--paper: #fafaf7;
	--register: #e9ede4;
	--rule: #c8d2c0;
	--ink: #1b1c2e;
	--ink-soft: #4a4c63;
	--stamp: #54409a;
	--stamp-wash: #efecf8;
	--filed: #2e6b4f;

	--measure: 62ch;
	--gutter: clamp(1rem, 4vw, 4.5rem);
	--step: clamp(3.5rem, 7vw, 6rem);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 400 17px/1.6 Archivo, system-ui, sans-serif;
	font-synthesis: none;
}

h1,
h2,
h3 {
	margin: 0;
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: 1.08;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2.5rem, 6.4vw, 4.25rem);
	font-weight: 800;
	letter-spacing: -0.035em;
}

h2 {
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
}

h3 {
	font-size: 1.125rem;
	letter-spacing: -0.01em;
}

p {
	margin: 0;
	max-width: var(--measure);
}

a {
	color: var(--stamp);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

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

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

/* ---------- masthead ---------- */

.masthead {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: baseline;
	justify-content: space-between;
	padding-block: 1.75rem;
}

.wordmark {
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--ink);
	text-decoration: none;
}

.masthead nav {
	display: flex;
	gap: 1.75rem;
	font-size: 0.95rem;
}

.masthead nav a {
	color: var(--ink-soft);
	text-decoration: none;
}

.masthead nav a:hover {
	color: var(--stamp);
	text-decoration: underline;
}

/* ---------- hero ---------- */

.hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--step);
	padding-block: clamp(2.5rem, 6vw, 5rem) var(--step);
	align-items: start;
}

@media (min-width: 62rem) {
	.hero {
		grid-template-columns: 1.05fr 0.95fr;
		gap: 4rem;
	}
}

.hero p.lede {
	margin-top: 1.75rem;
	font-size: 1.1875rem;
	color: var(--ink-soft);
	max-width: 48ch;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	margin-top: 2.5rem;
}

.button {
	display: inline-block;
	padding: 0.9rem 1.5rem;
	background: var(--stamp);
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	border: 0;
	border-radius: 2px;
	text-decoration: none;
}

.button:hover {
	background: #41307d;
}

.actions .aside {
	font-size: 0.95rem;
	color: var(--ink-soft);
	max-width: 26ch;
}

/* ---------- the register: the one bold element ---------- */

.register {
	background: var(--register);
	border: 1px solid var(--rule);
	border-radius: 2px;
	padding: 1.25rem 1.25rem 0.5rem;
	box-shadow: 0 1px 0 var(--rule) inset;
}

.register-head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: 0.85rem;
	border-bottom: 2px solid var(--rule);
	font-family: "Courier Prime", ui-monospace, monospace;
	font-size: 0.8125rem;
	color: var(--ink-soft);
}

.register table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.register tbody tr {
	border-bottom: 1px solid var(--rule);
}

.register tbody tr:last-child {
	border-bottom: 0;
}

.register td {
	padding: 0.85rem 0.5rem 0.85rem 0;
	vertical-align: baseline;
	text-align: left;
}

.register .ref {
	font-family: "Courier Prime", ui-monospace, monospace;
	font-size: 0.8125rem;
	white-space: nowrap;
	color: var(--ink);
}

.register .commune {
	font-weight: 600;
}

.register .kind {
	display: block;
	font-size: 0.8125rem;
	color: var(--ink-soft);
	font-weight: 400;
}

.register .state {
	font-family: "Courier Prime", ui-monospace, monospace;
	font-size: 0.8125rem;
	text-align: right;
	white-space: nowrap;
	padding-right: 0;
}

.register .state b {
	display: block;
	font-family: Archivo, sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.005em;
}

.state.is-filed b {
	color: var(--filed);
}

.state.is-running b {
	color: var(--stamp);
}

.stamp {
	display: inline-block;
	margin-top: 0.15rem;
	padding: 0.1rem 0.4rem;
	border: 1.5px solid var(--stamp);
	border-radius: 2px;
	color: var(--stamp);
	background: var(--stamp-wash);
	font-family: "Courier Prime", ui-monospace, monospace;
	font-size: 0.6875rem;
	/* Pivot on the right edge so the rotation never pushes the corner past
	 * the register's border. */
	transform-origin: 100% 50%;
	transform: rotate(-3deg);
}

/* The single orchestrated moment on the page: the stamp comes down once.
 * It animates transform only — never opacity — so a stamp whose animation
 * never runs (background tab, screenshot, reduced motion) is still fully
 * legible rather than invisible. */

@media (prefers-reduced-motion: no-preference) {
	.stamp {
		animation: stamp-down 520ms cubic-bezier(0.2, 0.9, 0.3, 1.15) 450ms both;
	}

	@keyframes stamp-down {
		from {
			transform: rotate(-12deg) scale(1.5);
		}
		to {
			transform: rotate(-3deg) scale(1);
		}
	}
}

/* ---------- sections ---------- */

section {
	padding-block: var(--step);
	border-top: 1px solid var(--rule);
}

.section-intro {
	max-width: 54ch;
}

.section-intro p {
	margin-top: 1.125rem;
	color: var(--ink-soft);
}

/* the only real sequence on the page, so the only numbering */

.sequence {
	list-style: none;
	margin: 3rem 0 0;
	padding: 0;
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 52rem) {
	.sequence {
		grid-template-columns: repeat(3, 1fr);
		gap: 2.5rem 3rem;
	}
}

.sequence li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 1rem;
	align-items: start;
}

.sequence .n {
	font-family: "Courier Prime", ui-monospace, monospace;
	font-size: 0.875rem;
	color: var(--stamp);
	padding-top: 0.28rem;
}

.sequence h3 {
	grid-column: 2;
}

.sequence p {
	grid-column: 2;
	margin-top: 0.6rem;
	font-size: 0.9688rem;
	color: var(--ink-soft);
}

.sequence .fixed {
	grid-column: 2;
	margin-top: 0.85rem;
	font-family: "Courier Prime", ui-monospace, monospace;
	font-size: 0.8125rem;
	color: var(--ink);
}

/* the three démarches: a bordereau, not three cards */

.bordereau {
	width: 100%;
	margin-top: 2.75rem;
	border-collapse: collapse;
	text-align: left;
}

.bordereau caption {
	text-align: left;
	font-family: "Courier Prime", ui-monospace, monospace;
	font-size: 0.8125rem;
	color: var(--ink-soft);
	padding-bottom: 0.75rem;
}

.bordereau th,
.bordereau td {
	padding: 1.1rem 1.25rem 1.1rem 0;
	border-bottom: 1px solid var(--rule);
	vertical-align: top;
}

.bordereau thead th {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ink-soft);
	border-bottom: 2px solid var(--rule);
	padding-top: 0;
}

.bordereau tbody th {
	font-weight: 700;
	font-size: 1.0625rem;
	width: 30%;
	letter-spacing: -0.012em;
}

.bordereau td {
	font-size: 0.9688rem;
	color: var(--ink-soft);
}

.bordereau .who {
	font-family: "Courier Prime", ui-monospace, monospace;
	font-size: 0.8125rem;
	color: var(--ink);
	white-space: nowrap;
}

/* states of a file */

.states {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

.states li {
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--rule);
	border-radius: 2px;
	background: var(--register);
	font-family: "Courier Prime", ui-monospace, monospace;
	font-size: 0.8125rem;
}

.states li:last-child {
	border-color: var(--filed);
	color: var(--filed);
}

.holds {
	list-style: none;
	margin: 2.75rem 0 0;
	padding: 0;
	display: grid;
	gap: 1.75rem;
	max-width: var(--measure);
}

.holds li {
	padding-left: 1.5rem;
	border-left: 2px solid var(--stamp);
}

.holds strong {
	display: block;
	font-weight: 700;
	letter-spacing: -0.012em;
}

.holds span {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.9688rem;
	color: var(--ink-soft);
}

/* ---------- closing ---------- */

.closing {
	background: var(--register);
	border-top: 1px solid var(--rule);
	padding-block: var(--step);
}

.closing .wrap {
	display: grid;
	gap: 2rem;
}

.closing p {
	color: var(--ink-soft);
}

footer {
	padding-block: 2.5rem 3.5rem;
	border-top: 1px solid var(--rule);
	font-size: 0.9375rem;
	color: var(--ink-soft);
}

footer .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	justify-content: space-between;
	align-items: baseline;
}

footer a {
	color: var(--ink-soft);
}

/* ---------- legal page ---------- */

.legal {
	padding-block: 2rem var(--step);
	max-width: 68ch;
}

.legal h1 {
	font-size: clamp(2rem, 4vw, 2.75rem);
}

.legal h2 {
	margin-top: 3rem;
	font-size: 1.25rem;
}

.legal p,
.legal li {
	margin-top: 1rem;
	color: var(--ink-soft);
	font-size: 1rem;
}

.legal dl {
	margin-top: 1.25rem;
	display: grid;
	gap: 0.6rem 1.5rem;
	font-size: 1rem;
}

@media (min-width: 40rem) {
	.legal dl {
		grid-template-columns: 14rem 1fr;
	}
}

.legal dt {
	color: var(--ink);
	font-weight: 600;
}

.legal dd {
	margin: 0;
	color: var(--ink-soft);
}

.legal .todo {
	background: var(--stamp-wash);
	border: 1px dashed var(--stamp);
	border-radius: 2px;
	padding: 0.05rem 0.4rem;
	font-family: "Courier Prime", ui-monospace, monospace;
	font-size: 0.875rem;
	color: var(--stamp);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- narrow screens ----------
 *
 * Two tables carry the page and neither survives a 390px viewport as a grid:
 * the register's typewritten references cannot wrap without losing their
 * shape, and the bordereau's four columns collapse into unreadable ribbons.
 * Below 52rem both become stacked entries, the way a paper form reads when
 * it is transcribed into a list.
 */

@media (max-width: 52rem) {
	.register {
		padding-inline: 1rem;
	}

	.register table,
	.register tbody,
	.register tr,
	.register td {
		display: block;
		width: auto;
	}

	.register tbody tr {
		padding-block: 0.9rem;
	}

	.register td {
		padding: 0;
	}

	.register .ref {
		white-space: normal;
		word-break: break-word;
		color: var(--ink-soft);
	}

	.register .commune {
		margin-top: 0.15rem;
	}

	.register .kind {
		display: inline;
	}

	.register .kind::before {
		content: " — ";
	}

	.register .state {
		margin-top: 0.45rem;
		text-align: left;
		white-space: normal;
	}

	.register .state b {
		display: inline;
	}

	.register .state b::after {
		content: ",";
		font-weight: 400;
	}

	.bordereau {
		display: block;
	}

	/* A caption inside a block-level table collapses to its minimum content
	 * width, which shreds a long line into one word per row. */
	.bordereau caption {
		display: block;
		width: 100%;
	}

	.bordereau thead {
		display: none;
	}

	.bordereau tbody,
	.bordereau tr,
	.bordereau th,
	.bordereau td {
		display: block;
		width: auto;
	}

	.bordereau tbody tr {
		padding-block: 1.25rem;
		border-bottom: 1px solid var(--rule);
	}

	.bordereau tbody tr:last-child {
		border-bottom: 0;
	}

	.bordereau tbody th {
		padding: 0 0 0.75rem;
		border-bottom: 0;
		font-size: 1.125rem;
	}

	.bordereau td {
		padding: 0.55rem 0 0;
		border-bottom: 0;
	}

	.bordereau td::before {
		content: attr(data-label);
		display: block;
		font-size: 0.75rem;
		color: var(--ink);
		font-weight: 600;
		margin-bottom: 0.15rem;
	}

	.bordereau .who {
		white-space: normal;
	}
}

@media (max-width: 30rem) {
	.masthead nav {
		gap: 1rem;
		font-size: 0.875rem;
	}
}

/* ---------- holding page ----------
 *
 * One cinematic plate. The two photographs are not decoration: a declaration
 * prealable requires a near view and a distant view of the site (DP7, DP8),
 * so they are captioned as the pieces of a file they would be. That is what
 * ties the wide image to the paper world the rest of the brand lives in.
 */

body.holding {
	margin: 0;
	background: var(--ink);
}

.plate {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	align-content: end;
	overflow: hidden;
	isolation: isolate;
}

.plate-far {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.plate-veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Three scrims. The lateral one is the one that matters: without it the
	 * body copy crosses a sunlit hillside and stops being readable halfway
	 * through the line. */
	background:
		linear-gradient(90deg, rgba(27, 28, 46, 0.86) 0%, rgba(27, 28, 46, 0.62) 34%, rgba(27, 28, 46, 0) 64%),
		linear-gradient(180deg, rgba(27, 28, 46, 0.5) 0%, rgba(27, 28, 46, 0) 30%),
		linear-gradient(0deg, rgba(27, 28, 46, 0.92) 4%, rgba(27, 28, 46, 0.66) 34%, rgba(27, 28, 46, 0.08) 70%);
}

.plate-text {
	max-width: 40rem;
	padding: 0 var(--gutter) 2rem;
}

.holding .wordmark {
	display: block;
	margin-bottom: 2.5rem;
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--paper);
}

.plate-text h1 {
	color: var(--paper);
	font-size: clamp(1.9rem, 4.4vw, 3rem);
	max-width: 17ch;
}

.plate-lede {
	margin-top: 1.5rem;
	color: rgba(250, 250, 247, 0.78);
	max-width: 48ch;
}

.plate-stamp {
	margin-top: 2rem;
}

.plate-stamp .stamp {
	transform-origin: 0 50%;
	border-color: rgba(250, 250, 247, 0.6);
	background: rgba(250, 250, 247, 0.1);
	color: var(--paper);
	font-size: 0.8125rem;
	padding: 0.35rem 0.75rem;
}

/* The near view, clipped onto the plate like a photograph added to the file. */

.plate-near {
	margin: 0 var(--gutter) 1.25rem;
	width: min(20rem, 55vw);
	justify-self: end;
	border: 1px solid rgba(250, 250, 247, 0.28);
	background: rgba(27, 28, 46, 0.5);
	padding: 0.5rem 0.5rem 0.4rem;
}

.plate-near img {
	display: block;
	width: 100%;
	height: auto;
}

.plate-near figcaption,
.plate-caption {
	font-family: "Courier Prime", ui-monospace, monospace;
	font-size: 0.6875rem;
	color: rgba(250, 250, 247, 0.6);
}

.plate-near figcaption {
	padding-top: 0.45rem;
}

.plate-caption {
	margin: 0 var(--gutter) 1.5rem;
}

.plate-foot {
	background: var(--paper);
	color: var(--ink-soft);
	padding: 2.5rem var(--gutter);
	display: grid;
	gap: 0.75rem;
	font-size: 0.9375rem;
}

.plate-foot p {
	max-width: 52ch;
}

.plate-foot a {
	color: var(--stamp);
}

/* One orchestrated moment: the plate settles, then the stamp comes down.
 * Transform and filter only — no opacity on the stamp, so a run that never
 * happens still leaves everything legible. */

@media (prefers-reduced-motion: no-preference) {
	.plate-far {
		animation: plate-settle 2600ms cubic-bezier(0.16, 0.8, 0.28, 1) both;
	}

	@keyframes plate-settle {
		from {
			transform: scale(1.06);
			filter: brightness(0.82);
		}
		to {
			transform: scale(1);
			filter: brightness(1);
		}
	}
}

/* ---------- narrow screens ----------
 *
 * Two tables carry the page and neither survives a 390px viewport as a grid:
 * the register's typewritten references cannot wrap without losing their
 * shape, and the bordereau's four columns collapse into unreadable ribbons.
 * Below 52rem both become stacked entries, the way a paper form reads when
 * it is transcribed into a list.
 */

@media (max-width: 52rem) {
	.register {
		padding-inline: 1rem;
	}

	.register table,
	.register tbody,
	.register tr,
	.register td {
		display: block;
		width: auto;
	}

	.register tbody tr {
		padding-block: 0.9rem;
	}

	.register td {
		padding: 0;
	}

	.register .ref {
		white-space: normal;
		word-break: break-word;
		color: var(--ink-soft);
	}

	.register .commune {
		margin-top: 0.15rem;
	}

	.register .kind {
		display: inline;
	}

	.register .kind::before {
		content: " — ";
	}

	.register .state {
		margin-top: 0.45rem;
		text-align: left;
		white-space: normal;
	}

	.register .state b {
		display: inline;
	}

	.register .state b::after {
		content: ",";
		font-weight: 400;
	}

	.bordereau {
		display: block;
	}

	/* A caption inside a block-level table collapses to its minimum content
	 * width, which shreds a long line into one word per row. */
	.bordereau caption {
		display: block;
		width: 100%;
	}

	.bordereau thead {
		display: none;
	}

	.bordereau tbody,
	.bordereau tr,
	.bordereau th,
	.bordereau td {
		display: block;
		width: auto;
	}

	.bordereau tbody tr {
		padding-block: 1.25rem;
		border-bottom: 1px solid var(--rule);
	}

	.bordereau tbody tr:last-child {
		border-bottom: 0;
	}

	.bordereau tbody th {
		padding: 0 0 0.75rem;
		border-bottom: 0;
		font-size: 1.125rem;
	}

	.bordereau td {
		padding: 0.55rem 0 0;
		border-bottom: 0;
	}

	.bordereau td::before {
		content: attr(data-label);
		display: block;
		font-size: 0.75rem;
		color: var(--ink);
		font-weight: 600;
		margin-bottom: 0.15rem;
	}

	.bordereau .who {
		white-space: normal;
	}
}

@media (max-width: 30rem) {
	.masthead nav {
		gap: 1rem;
		font-size: 0.875rem;
	}
}

/* ---------- holding page ----------
 *
 * One screen, one stamp. It reuses the register's ink and paper so that the
 * site people find before the opening already looks like the product.
 */

body.holding {
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	grid-template-rows: 1fr auto;
	align-items: center;
	padding-inline: var(--gutter);
}

.holding-card {
	width: 100%;
	max-width: 34rem;
	margin-inline: auto;
	padding-block: 4rem 2rem;
}

.holding .wordmark {
	display: block;
	margin-bottom: 3rem;
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.04em;
}

.holding h1 {
	font-size: clamp(1.75rem, 4.6vw, 2.5rem);
	max-width: 18ch;
}

.holding-lede {
	margin-top: 1.75rem;
	color: var(--ink-soft);
	max-width: 46ch;
}

.holding-state {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}

.holding-state .stamp {
	font-size: 0.8125rem;
	padding: 0.35rem 0.75rem;
	/* Pivot on the left edge here: the stamp opens the column, it must not
	 * lean out into the margin the way it does inside the register. */
	transform-origin: 0 50%;
}

.holding-contact {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--rule);
	font-size: 0.9688rem;
	color: var(--ink-soft);
	max-width: 46ch;
}

.holding-footer {
	padding-block: 2rem;
	max-width: 34rem;
	width: 100%;
	margin-inline: auto;
	font-size: 0.875rem;
}

.holding-footer a {
	color: var(--ink-soft);
}