@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;800&display=swap');

:root {
	--paper: #ecebe6;
	--ink: #141414;
	--soft: #8a8984;
}

@media (prefers-color-scheme: dark) {
	:root {
		--paper: #121212;
		--ink: #ecebe6;
		--soft: #6f6e6a;
	}
}

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

html { background: var(--paper); }

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	background: var(--paper);
	color: var(--ink);
	font-family: 'Schibsted Grotesk', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

ul.menu, aside { display: none; }

main {
	flex: 1;
	display: flex;
	padding: clamp(20px, 4.5vw, 64px);
}

.card {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 48px;
}

.card p { margin: 0; }

.card .mark {
	font-weight: 800;
	font-size: clamp(112px, 30vw, 420px);
	line-height: .78;
	letter-spacing: -.065em;
	margin-left: -.04em;
}

.card .contact {
	font-size: clamp(20px, 3vw, 34px);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -.015em;
}

.card .contact a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1.5px solid transparent;
	transition: border-color .15s;
}

.card .contact a:hover,
.card .contact a:focus-visible {
	border-color: currentColor;
	outline: none;
}

::selection { background: var(--ink); color: var(--paper); }