/* OT Publishing Limited — corporate single page */

:root {
	--purple: #9b3f8a;
	--purple-light: #ab5e9d;
	--ink: #2c2f33;
	--muted: #6b7075;
	--page: #f4f2f5;
	--card: #ffffff;
	--rule: #e6e2e9;
	--shadow: 0 1px 2px rgba(44, 47, 51, .06), 0 12px 32px rgba(155, 63, 138, .10);
}

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

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 5vw, 3rem);
	background: var(--page);
	background-image: radial-gradient(ellipse at 50% -20%, rgba(171, 94, 157, .18), transparent 60%);
	color: var(--ink);
	font-family: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}

.card {
	width: 100%;
	max-width: 34rem;
	background: var(--card);
	border-radius: 12px;
	box-shadow: var(--shadow);
	border-top: 4px solid var(--purple);
	padding: clamp(1.75rem, 6vw, 3rem);
	text-align: center;
}

.card__header {
	padding-bottom: clamp(1.5rem, 5vw, 2.25rem);
	border-bottom: 1px solid var(--rule);
}

.logo {
	display: block;
	width: 100%;
	max-width: 17.5rem;
	height: auto;
	margin: 0 auto;
}

/* Details list ------------------------------------------------------- */

.details {
	margin: 0;
	text-align: left;
}

.details dt {
	margin-top: clamp(1.5rem, 5vw, 2rem);
	color: var(--muted);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.details dd {
	margin: .4rem 0 0;
	font-size: 1.0625rem;
}

.details address {
	font-style: normal;
}

.card a {
	color: var(--purple);
	text-decoration-color: rgba(155, 63, 138, .35);
	text-underline-offset: .2em;
	overflow-wrap: anywhere;
}

.card a:hover,
.card a:focus-visible {
	color: var(--purple-light);
	text-decoration-color: currentColor;
}

/* Not-found notice --------------------------------------------------- */

.notice {
	padding-top: clamp(1.75rem, 6vw, 2.5rem);
}

.notice h1 {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -.01em;
}

.notice p {
	margin: .5rem 0 0;
	color: var(--muted);
}

/* Footer ------------------------------------------------------------- */

.card__footer {
	margin-top: clamp(1.75rem, 6vw, 2.5rem);
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule);
	color: var(--muted);
	font-size: .8125rem;
}

.card__footer p {
	margin: 0;
}

.card__footer p + p {
	margin-top: .25rem;
}

/* Utilities ---------------------------------------------------------- */

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

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

/* Wide screens ------------------------------------------------------- */

@media (min-width: 40em) {
	.details {
		display: grid;
		grid-template-columns: 13rem 1fr;
		column-gap: 1.5rem;
		align-items: baseline;
	}

	.details dt {
		grid-column: 1;
		margin-top: 1.5rem;
	}

	.details dd {
		grid-column: 2;
		margin-top: 1.5rem;
	}
}

/* Dark mode ---------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	:root {
		--ink: #ece9ef;
		--muted: #a3a8ae;
		--page: #17151a;
		--card: #211e26;
		--rule: #35313c;
		--purple: #c07ab3;
		--purple-light: #d79ccb;
		--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
	}

	body {
		background-image: radial-gradient(ellipse at 50% -20%, rgba(155, 63, 138, .35), transparent 60%);
	}

	.card {
		border-top-color: #9b3f8a;
	}

	.card a {
		text-decoration-color: rgba(192, 122, 179, .45);
	}
}

/* Print -------------------------------------------------------------- */

@media print {
	body {
		background: none;
		padding: 0;
	}

	.card {
		max-width: none;
		box-shadow: none;
		border-top: 0;
		padding: 0;
	}
}