/* Self-hosted so text doesn't wait on two extra origins. Merriweather is only used for the
   header, so it is subset to exactly those glyphs (Google Fonts `text=` parameter with
   "Jeff Wesson" + "Staff Engineer") — re-download it if the header text changes. */
@font-face {
	font-family: 'Bebas Neue';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/fonts/bebas-neue-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Merriweather';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('/fonts/merriweather-header.woff2') format('woff2');
}

:root {
	--content-width: 960px;
}

/* <wa-page> lays itself out only once its definition loads from the CDN. Until then keep it
   hidden and show the loader instead. The step-end animation reveals the page anyway after
   a few seconds so a CDN failure degrades to unstyled content instead of a blank screen. */
wa-page:not(:defined) {
	animation: 4s step-end page-reveal;
}

@keyframes page-reveal {
	from {
		visibility: hidden;
	}
}

.page-loader {
	position: fixed;
	inset: 0;
	display: grid;
	place-content: center;
	animation: 4s step-end forwards loader-hide;
}

@keyframes loader-hide {
	to {
		visibility: hidden;
	}
}

wa-page:defined ~ .page-loader {
	display: none;
}

.page-loader svg {
	width: 3rem;
	height: 3rem;
	animation: 0.8s linear infinite loader-spin;
}

@keyframes loader-spin {
	to {
		rotate: 360deg;
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-loader svg {
		animation-duration: 3s;
	}
}

wa-page {
	--main-width: var(--content-width);
	--menu-width: 1fr;
	--aside-width: 1fr;
}

/* header/subheader/footer are outer-grid rows — constrain their content,
   leave the part full-bleed so sticky backgrounds still span */
[slot='header'],
[slot='subheader'],
[slot='footer'] {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
}

[slot='subheader'] {
	font-family: 'Bebas Neue';
	font-size: 1.5rem;
	align-content: center;
	justify-content: center;
}

[slot='subheader'] [aria-current='page'] {
	text-decoration: underline;
}

header {
	flex-direction: column;
}

header hgroup {
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	/* wa-page slots the header as a flex column, so h1's block margin and the
	   flex gap stack instead of collapsing — zero the margin and let gap alone
	   control the space between the name and the title */
	gap: 0.25rem;
}

header h1 {
	margin-block-end: 0;
}

header p {
	text-align: center;
}

header h1,
header p {
	font-family: Merriweather;
}

picture {
	display: block;
}

/* width/height are set on the <img> so the browser can reserve the right box before the
   image arrives; height:auto lets it scale instead of honouring the literal attribute */
img {
	display: block;
	width: 100%;
	height: auto;
	margin: 1em auto 0;
	box-shadow: 8px 8px 24px 3px #666;
}

wa-divider {
	margin: 3em auto;
}

footer {
	align-content: center;
	justify-content: center;
}

footer svg {
	height: 2em;
	width: auto;
	fill: currentColor;
	vertical-align: middle;
}