:root {
	--color-bg: #f2f5f9;
	--color-surface: #ffffff;
	--color-surface-muted: #e6edf5;
	--color-text: #14202b;
	--color-muted: #52606d;
	--color-border: #d3dde8;
	--color-primary: #2563a8;
	--color-primary-strong: #1c4c82;
	--color-primary-soft: #dbe8f5;
	--color-accent: #c2772e;
	--shadow-soft: 0 18px 50px rgba(20, 32, 43, 0.08);
	--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
	--step--1: clamp(0.86rem, 0.84rem + 0.1vw, 0.92rem);
	--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
	--step-1: clamp(1.2rem, 1.08rem + 0.6vw, 1.55rem);
	--step-2: clamp(1.55rem, 1.34rem + 1.05vw, 2.15rem);
	--step-3: clamp(2.35rem, 1.84rem + 2.55vw, 4.2rem);
	--space-1: 0.35rem;
	--space-2: 0.65rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2.25rem;
	--space-6: 3.5rem;
	--space-7: 5rem;
	--radius-sm: 0.5rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.5rem;
	--max-page: 72rem;
	--header-height: 4.5rem;
}

* {
	box-sizing: border-box;
}

html {
	color-scheme: light;
	font-family: var(--font-sans);
	background: var(--color-bg);
	color: var(--color-text);
}

body {
	margin: 0;
	min-height: 100vh;
	font-size: var(--step-0);
	line-height: 1.6;
}

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

a:focus-visible {
	outline: 3px solid var(--color-primary-soft);
	outline-offset: 3px;
}

.site-header {
	position: absolute;
	inset: 0 0 auto;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(100% - 2rem, var(--max-page));
	height: var(--header-height);
	margin-inline: auto;
}

.site-header.compact {
	position: fixed;
}

.brand {
	display: inline-grid;
	place-items: center;
	width: 2.45rem;
	height: 2.45rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: rgba(255, 253, 248, 0.78);
	color: var(--color-text);
	font-weight: 700;
	box-shadow: var(--shadow-soft);
}

.login-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.45rem;
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: rgba(255, 253, 248, 0.82);
	color: var(--color-text);
	font-size: var(--step--1);
	font-weight: 650;
	box-shadow: var(--shadow-soft);
}

.login-link:hover,
.primary-link:hover,
.text-link:hover,
.admin-link:hover {
	color: var(--color-primary-strong);
}

.hero {
	display: grid;
	align-items: end;
	min-height: min(46rem, 88vh);
	padding: calc(var(--header-height) + var(--space-5)) 1rem var(--space-7);
	background:
		linear-gradient(120deg, rgba(246, 243, 236, 0.98), rgba(246, 243, 236, 0.72)),
		linear-gradient(135deg, var(--color-primary-soft), var(--color-surface-muted) 46%, #eadfcb);
}

.hero-copy,
.content-grid,
.login-panel {
	width: min(100%, var(--max-page));
	margin-inline: auto;
}

.hero-copy {
	max-width: 47rem;
	margin-left: max(1rem, calc((100vw - var(--max-page)) / 2));
	margin-right: 1rem;
}

.eyebrow,
.section-kicker {
	margin: 0 0 var(--space-2);
	color: var(--color-primary-strong);
	font-size: var(--step--1);
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

h1,
h2,
p {
	margin-top: 0;
}

h1,
h2 {
	line-height: 1.08;
	letter-spacing: 0;
}

h1 {
	max-width: 12ch;
	margin-bottom: var(--space-4);
	font-family: var(--font-serif);
	font-size: var(--step-3);
	font-weight: 680;
}

h2 {
	margin-bottom: var(--space-3);
	font-size: var(--step-1);
}

.lead {
	max-width: 42rem;
	margin-bottom: var(--space-5);
	color: var(--color-muted);
	font-size: var(--step-1);
}

.primary-link,
.google-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0 var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-primary);
	color: white;
	font-weight: 750;
	box-shadow: var(--shadow-soft);
}

.primary-link:hover,
.google-button:hover {
	background: var(--color-primary-strong);
	color: white;
}

.content-band {
	padding: var(--space-7) 1rem;
	background: var(--color-surface);
}

.content-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-5);
}

.text-block {
	min-width: 0;
}

.text-block p:not(.section-kicker) {
	color: var(--color-muted);
}

.text-link {
	color: var(--color-primary);
	font-weight: 750;
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.22em;
}

.login-page {
	display: grid;
	min-height: 100vh;
	background:
		linear-gradient(145deg, rgba(246, 243, 236, 0.96), rgba(246, 243, 236, 0.78)),
		linear-gradient(135deg, var(--color-primary-soft), var(--color-surface-muted) 45%, #efe2cf);
}

.login-shell {
	display: grid;
	place-items: center;
	width: 100%;
	padding: calc(var(--header-height) + var(--space-5)) 1rem var(--space-5);
}

.login-panel {
	max-width: 35rem;
	padding: var(--space-5);
	border: 1px solid rgba(217, 209, 194, 0.86);
	border-radius: var(--radius-lg);
	background: rgba(255, 253, 248, 0.82);
	box-shadow: var(--shadow-soft);
	backdrop-filter: blur(10px);
}

.login-panel h1 {
	max-width: 16ch;
	font-size: var(--step-2);
}

.login-panel .lead {
	margin-bottom: var(--space-5);
	font-size: var(--step-0);
}

.login-actions {
	display: grid;
	gap: var(--space-3);
	justify-items: start;
}

.google-button {
	width: min(100%, 22rem);
	min-height: 3.35rem;
	font-size: var(--step-0);
}

.admin-link {
	color: var(--color-muted);
	font-size: var(--step--1);
	font-weight: 650;
	text-decoration: underline;
	text-decoration-color: var(--color-border);
	text-underline-offset: 0.25em;
}

@media (max-width: 760px) {
	:root {
		--header-height: 4rem;
	}

	.site-header {
		width: min(100% - 1rem, var(--max-page));
	}

	.hero {
		min-height: 86vh;
		padding-bottom: var(--space-6);
	}

	.hero-copy {
		margin-inline: auto;
	}

	h1 {
		max-width: 11ch;
	}

	.content-grid {
		grid-template-columns: 1fr;
		gap: var(--space-5);
	}

	.content-band {
		padding-block: var(--space-6);
	}

	.login-link {
		min-height: 2.35rem;
		padding-inline: var(--space-2);
	}

	.login-panel {
		padding: var(--space-4);
	}
}