/* Mourier Typeface - Download from https://velvetyne.fr/fonts/mourier/ */
@font-face {
	font-family: "Mourier";
	src:
		url("./fonts/Mourier-Regular.woff2") format("woff2"),
		url("./fonts/Mourier-Regular.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

:root {
	--font-1: clamp(0.75rem, 1vw, 1rem);
	--font-2: clamp(0.875rem, 1.5vw, 1.25rem);
	--font-3: clamp(1rem, 2vw, 1.5rem);
	--font-4: clamp(1.25rem, 3vw, 2rem);
	--font-5: clamp(1.5rem, 4vw, 3rem);
	--font-6: clamp(2.5rem, 8vw, 6rem);
	--font-7: clamp(4rem, 15vw, 12rem);

	/* Fluid spacing */
	--space-sm: clamp(0.5rem, 1vw, 1rem);
	--space-md: clamp(1rem, 3vw, 2rem);
	--space-lg: clamp(2rem, 5vw, 4rem);
}

/* View Transitions */
@view-transition {
	navigation: auto;
}

/* Reset & Base */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

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

body {
	font-family: "Mourier", Georgia, serif;
	background: #0a0a0a;
	color: #f5f5f5;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--space-lg);
}

/* Index Page - Alphabet Grid */
.alphabet-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--space-sm);
	max-width: 100%;
	width: 100%;

	@media (max-width: 600px) {
		grid-template-columns: repeat(4, 1fr);
	}

	@media (max-width: 400px) {
		grid-template-columns: repeat(3, 1fr);
	}

	& a {
		display: flex;
		align-items: center;
		justify-content: center;
		aspect-ratio: 1;
		font-size: var(--font-7);
		text-decoration: none;
		color: inherit;
		transition: transform 0.2s ease;

		&:hover {
			transform: scale(1.1);
		}

		&:active {
			transform: scale(0.95);
		}
	}
}

/* Letter Pages */
.letter-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: var(--space-lg);
	text-align: center;

	& .letter-display {
		font-size: var(--font-7);
	}

	& .poem {
		font-size: var(--font-6);
	}

	& .attribution {
		margin-top: var(--space-md);
		font-size: var(--font-5);

		& .author {
			font-style: italic;
		}

		& .source {
			margin-top: var(--space-sm);
			font-size: var(--font-1);
		}
	}

	& .back-link {
		position: fixed;
		top: var(--space-md);
		left: var(--space-md);
		font-size: var(--font-5);
		line-height: 1;
		text-decoration: none;
		color: inherit;
	}
}