/* ==========================================================================
   MIRZAX CO: default pages and 404 (page.php, 404.php)
   ========================================================================== */

.mx-page { padding-block: clamp(36px, 5vw, 64px) var(--mx-section-y); }
.mx-page__cover { margin: 0 0 clamp(32px, 4vw, 48px); }
.mx-page__cover img { display: block; width: 100%; height: auto; border-radius: 22px; }
.mx-page__content { max-width: 780px; }
/* Pages with full-width blocks or the quote form use the whole width */
.mx-page__content:has(.mx-quote),
.mx-page__content:has(> .alignfull),
.mx-page__content:has(> .alignwide) { max-width: none; }
.mx-page__content .mx-quote { margin-top: 0; }

/* ---------- 404 ---------- */
.mx-404 { padding-block: clamp(48px, 9vw, 120px); background: var(--mx-cotton); }
.mx-404__inner { max-width: 680px; text-align: center; }
.mx-404__code {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	color: var(--mx-ink);
	font-size: clamp(96px, 18vw, 180px);
	font-weight: 800;
	font-stretch: 75%;
	line-height: 1;
}
.mx-404__spool {
	display: grid;
	place-items: center;
	width: 0.8em;
	height: 0.8em;
	border: 3px dashed var(--mx-gold-deep);
	border-radius: 50%;
	color: var(--mx-ink);
	animation: mx-spin 14s linear infinite;
}
.mx-404__spool .mx-icon { width: 0.38em; height: 0.38em; }
@keyframes mx-spin { to { transform: rotate(360deg); } }
.mx-404__title { margin: 20px 0 10px; color: var(--mx-ink); font-size: clamp(28px, 4vw, 42px); font-stretch: 86%; }
.mx-404__text { margin: 0 auto; max-width: 48ch; color: var(--mx-text-muted); font-size: 17px; }
.mx-404__search { max-width: 520px; margin: 28px auto 0; text-align: left; }
.mx-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }

@media (prefers-reduced-motion: reduce) {
	.mx-404__spool { animation: none; }
}