@font-face {
	font-family: "Instrument Serif";
	src: url("/instrument-serif.woff2") format("woff2");
	font-display: swap;
}

@font-face {
	font-family: "Be Vietnam Pro";
	src: url("/be-vietnam.woff2") format("woff2");
	font-display: swap;
}

* {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
	margin: 0;
}

body {
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	color: #eeece1;
	color-scheme: dark;
	background: linear-gradient(#1e373f 0%, #ad8f70 54%, #173b3b 57%, #133032 100%);
}

#coast-landscape,
.coast-shade {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

#coast-landscape {
	z-index: 0;
}

.coast-shade {
	z-index: 1;
	background: linear-gradient(90deg, #070e1699, #07101738 48%, transparent 82%);
}

main {
	position: relative;
	z-index: 2;
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: 4vw;
}

.message {
	text-align: center;
}

h1 {
	margin: 0;
	font-family: "Instrument Serif", Georgia, serif;
	font-size: clamp(15px, 5.15vw, 96px);
	font-weight: 400;
	letter-spacing: -0.035em;
	line-height: 1;
	white-space: nowrap;
}

p {
	margin: 24px 0 0;
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: clamp(11px, 0.8vw, 14px);
	line-height: 1.7;
	color: #ccd2cb;
}

a {
	color: inherit;
	text-decoration: none;
}

a:focus-visible {
	outline: 2px solid #ebc596;
	outline-offset: 10px;
}

/* The destination sits inside the sentence here, so it needs to read as a link. */
p a {
	color: #eeece1;
	text-decoration: underline;
	text-underline-offset: 3px;
}