:root {
	--brand-lilac-base: hsl(274, 30%, 65%);
	--brand-lilac-light: #c1acd2;
	--light-lilac: hsl(270, 27%, 96%);
	--dark-purple: hsl(275, 15%, 25%);
	--darkest-purple: #2a2330;
	--heading-color: #554661;
	--body-font-color: hsl(0, 0%, 30%);
	--colour-bg: var(--brand-lilac-light);
	--colour-card: #ffffff;
	--colour-purple: var(--dark-purple);
	--colour-purple-dark: var(--darkest-purple);
	--colour-border: rgba(37, 21, 43, 0.14);
	--colour-soft: #eee5dc;

	--serif-font: "minion-3", serif;
	--heading-font: var(--serif-font);
	--sans-serif-font: "azo-sans-web", "cofo-sans-variable", sans-serif;
	--button-font: "europa", var(--sans-serif-font), sans-serif;

	--space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
	--space-sm: clamp(0.8rem, 0.7rem + 0.45vw, 1.15rem);
	--space-md: clamp(1.1rem, 0.95rem + 0.75vw, 1.7rem);
	--space-lg: clamp(1.6rem, 1.25rem + 1.6vw, 2.8rem);
	--space-xl: clamp(2.2rem, 1.65rem + 2.5vw, 4rem);

}

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

html {
	min-height: 100%;
	font-size: 100%;
}

body {
	min-height: 100vh;
	margin: 0;
	color: var(--body-font-color);
	background:
		radial-gradient(circle at top left, rgba(42, 18, 49, 0.10), transparent 34rem),
		linear-gradient(135deg, #fbf8f4 0%, var(--colour-bg) 100%);
	font-family: var(--sans-serif-font);
	line-height: 1.5;
}

a {
	color: inherit;
}

.page {
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: var(--space-md);
}

.notice {
	width: min(100%, 46rem);
	padding: var(--space-xl);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1.5rem 4rem rgba(37, 21, 43, 0.12);
	text-align: center;
}

.brand-logo {
	display: block;
	width: min(100%, 220px);
	width: clamp(170px, 46vw, 220px);
	height: auto;
	margin: 0 auto var(--space-lg);
}

h1 {
	max-width: 15ch;
	margin: 0 auto var(--space-lg);
	font-family: var(--serif-font);
	color: var(--heading-color);
	font-size: clamp(2.1rem, 1.55rem + 2.6vw, 4.2rem);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.015em;
}

p {
	max-width: 38rem;
	margin: 0 auto;
	color: var(--colour-muted);
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.18rem);
	letter-spacing: -0.01em;
	font-weight: 300;
}

p + p {
	margin-top: var(--space-sm);
}

.intro {
	font-size: clamp(1.05rem, 0.98rem + 0.42vw, 1.28rem);
}

.contact-box {
	display: grid;
	gap: 0.25rem;
	margin: var(--space-lg) auto 0;
	margin: 1.5rem auto 0;
	padding: var(--space-md);
	padding: 0;
	/* background: var(--brand-lilac-light); */
}

.contact-box a {
	color: var(--colour-purple-dark);
	color: var(--heading-color);
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
	font-weight: 400;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
	transition: color 180ms ease;
	&:hover {
		color: var(--brand-lilac-base);
	}
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--space-lg);
	padding: 1.75em 1.5em;
	background: var(--brand-lilac-base);
	color: #ffffff;
	font-size: 0.85rem;
	font-family: var(--button-font);
	letter-spacing: 0.15em;
	text-indent: 0.15em;
	font-weight: 500;
	text-transform: uppercase;
	line-height: 0;
	text-decoration: none;
	transition:
		background-color 160ms ease;
}

.button:hover,
.button:focus-visible {
	background: var(--dark-purple);
}

.button:focus-visible {
	outline: 3px solid rgba(42, 18, 49, 0.35);
	outline-offset: 4px;
}

@media (min-width: 46rem) {}