.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.site__main {
	flex: 1;
	padding-top: var(--header-height); /* the header is fixed */
}

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

.skiplink {
	position: absolute;
	top: var(--space-sm);
	left: var(--space-sm);
	z-index: 100;
	padding: var(--space-sm) var(--space-md);
	background-color: var(--color-primary-strong);
	color: var(--color-bg);
	border-radius: var(--radius-md);
	transform: translateY(-200%);
}

.skiplink:focus {
	color: var(--color-bg);
	transform: none;
}