/* Orion 404 — 404.html plain centered error section.
   Breakpoints: sm=640, md=769, lg=992, xl=1199, 1xl=1380, 2xl=1752. */

.orion-404-section {
	background: #fff;
	overflow: hidden;
}

/* Beat theme `.container` mobile 8px padding — HTML is always px-4 (16px). */
.orion-404__container.container {
	width: 100%;
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
}
@media (min-width: 640px)  { .orion-404__container.container { max-width: 640px; } }
@media (min-width: 769px)  { .orion-404__container.container { max-width: 769px; } }
@media (min-width: 992px)  { .orion-404__container.container { max-width: 992px; } }
@media (min-width: 1199px) { .orion-404__container.container { max-width: 1199px; } }
@media (min-width: 1380px) { .orion-404__container.container { max-width: 1380px; } }
@media (min-width: 1752px) { .orion-404__container.container { max-width: 1752px; } }

/* HTML: lg:min-h-[95vh] min-h-[75vh] flex items-center justify-center */
.orion-404__center {
	min-height: 75vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
@media (min-width: 992px) {
	.orion-404__center { min-height: 95vh; }
}

/* Shrink-wrap column like HTML's inner .text-center flex child */
.orion-404__inner {
	text-align: center;
	width: fit-content;
	max-width: 100%;
}

/*
 * 404 number — HTML utility classes:
 * 2xl:330/294 1xl:280/280 xl:250/260 lg:lh 235 md:220/220
 * sm:175/160 base:70/84. Global headings = El Messiri medium (500).
 * Must beat Kit flat h1 size (html body + !important).
 */
html body h1.orion-404__number,
h1.orion-404__number {
	margin: 0;
	width: 100%;
	font-family: var(--orion-font-heading, "El Messiri", serif) !important;
	font-weight: 500 !important;
	font-style: normal;
	color: #000 !important;
	font-size: 70px !important;
	line-height: 84px !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-align: center;
}
@media (min-width: 640px) {
	html body h1.orion-404__number,
	h1.orion-404__number {
		font-size: 175px !important;
		line-height: 160px !important;
	}
}
@media (min-width: 769px) {
	html body h1.orion-404__number,
	h1.orion-404__number {
		font-size: 220px !important;
		line-height: 220px !important;
	}
}
@media (min-width: 992px) {
	html body h1.orion-404__number,
	h1.orion-404__number { line-height: 235px !important; }
}
@media (min-width: 1199px) {
	html body h1.orion-404__number,
	h1.orion-404__number {
		font-size: 250px !important;
		line-height: 260px !important;
	}
}
@media (min-width: 1380px) {
	html body h1.orion-404__number,
	h1.orion-404__number {
		font-size: 280px !important;
		line-height: 280px !important;
	}
}
@media (min-width: 1752px) {
	html body h1.orion-404__number,
	h1.orion-404__number {
		font-size: 330px !important;
		line-height: 294px !important;
	}
}

/*
 * Title — HTML h3 + font-light + 1xl:mb-6 mb-4
 * Global h3: 26/30 → sm lh32 → md 30/38 → xl lh40 → 1xl 36 → 2xl 45/60
 */
html body h3.orion-404__title,
h3.orion-404__title {
	margin: 0 0 16px;
	font-family: var(--orion-font-heading, "El Messiri", serif) !important;
	font-weight: 300 !important;
	font-style: normal;
	color: #000 !important;
	font-size: 26px !important;
	line-height: 30px !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}
@media (min-width: 640px) {
	html body h3.orion-404__title,
	h3.orion-404__title { line-height: 32px !important; }
}
@media (min-width: 769px) {
	html body h3.orion-404__title,
	h3.orion-404__title {
		font-size: 30px !important;
		line-height: 38px !important;
	}
}
@media (min-width: 1199px) {
	html body h3.orion-404__title,
	h3.orion-404__title { line-height: 40px !important; }
}
@media (min-width: 1380px) {
	html body h3.orion-404__title,
	h3.orion-404__title {
		font-size: 36px !important;
		line-height: 40px !important;
		margin-bottom: 24px;
	}
}
@media (min-width: 1752px) {
	html body h3.orion-404__title,
	h3.orion-404__title {
		font-size: 45px !important;
		line-height: 60px !important;
	}
}

/*
 * Description — HTML p + 2xl:max-w-[682] max-w-[580] mx-auto mb-8
 * Global p: Lexend light, 14/23 → lg 15/25 → xl lh26 → 1xl lh28 → 2xl 18/32
 */
html body p.orion-404__desc,
p.orion-404__desc {
	width: 100%;
	max-width: 580px;
	margin: 0 auto 32px;
	font-family: var(--orion-font-body, Lexend, sans-serif) !important;
	font-weight: 300 !important;
	font-style: normal;
	color: #000 !important;
	font-size: 14px !important;
	line-height: 23px !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}
@media (min-width: 992px) {
	html body p.orion-404__desc,
	p.orion-404__desc {
		font-size: 15px !important;
		line-height: 25px !important;
	}
}
@media (min-width: 1199px) {
	html body p.orion-404__desc,
	p.orion-404__desc { line-height: 26px !important; }
}
@media (min-width: 1380px) {
	html body p.orion-404__desc,
	p.orion-404__desc { line-height: 28px !important; }
}
@media (min-width: 1752px) {
	html body p.orion-404__desc,
	p.orion-404__desc {
		max-width: 682px;
		font-size: 18px !important;
		line-height: 32px !important;
	}
}

.orion-404__btn {
	margin: 0 auto;
	display: inline-flex;
}