/* Open Sans (latin subset, weights 300-600), self-hosted. SIL Open Font License 1.1. */
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url("/fonts/open-sans-latin.woff2") format("woff2");
}

/*
 * Palette: Tailwind slate, sky and emerald. Layout and sizes follow the original draft.
 * In light mode the button and hover were darkened slightly from sky-600 (#0284c7) and emerald-500 (#10b981)
 * so the white button text reaches WCAG AA (4.5:1): button #027dbc (4.50:1), hover #0c875e (4.52:1).
 * Dark mode (sky-400 and emerald-300 on slate-800, with dark text) passes without changes.
 */
:root {
	color-scheme: light dark;
	--page: #f1f5f9;
	--text: #333333;
	--accent: #027dbc;
	--accent-hover: #0c875e;
	--on-accent: #ffffff;
	--shadow: #666666;
}

@media (prefers-color-scheme: dark) {
	:root {
		--page: #1e293b;
		--text: #e6e8eb;
		--accent: #38bdf8;
		--accent-hover: #6ee7b7;
		--on-accent: #0a1929;
		--shadow: #000000;
	}
}

* {
	margin: 0;
	padding: 0;
}

html {
	background: var(--page);
	color: var(--text);
}

body {
	min-height: 100vh;
	min-height: 100dvh;
	display: grid;
	place-items: center;
	font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 300;
}

/* One shrink-to-fit block: the widest line sets the width, and the button fills it. */
main {
	width: fit-content;
	max-width: 100%;
	padding: 1rem;
	text-align: center;
}

.name {
	font-size: 3.3rem;
	text-indent: 0.3rem;
	font-weight: 300;
}

.role {
	font-size: 1.1rem;
	font-weight: 600;
	text-transform: uppercase;
}

.ethos {
	font-size: 0.9rem;
	margin: 1rem 0 1.2rem;
}

.contact {
	display: block;
	padding: 1rem;
	border-radius: 4px;
	background: var(--accent);
	color: var(--on-accent);
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 1px 2px 0 var(--shadow);
	/* A colour fade involves no movement, so it is not gated on prefers-reduced-motion. */
	transition: background-color 0.5s;
}

.contact:hover {
	background: var(--accent-hover);
}

.contact:active {
	box-shadow: inset 0 1px 2px var(--shadow);
}

.contact:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
}

@media (max-width: 20rem) {
	.name {
		font-size: 2.6rem;
	}
}