body {
	margin: 40px auto;
	max-width: 650px;
	line-height: 1.6;
	font-size: 18px;
	color: #444;
	padding: 0 10px;
}
h1,
h2,
h3 {
	line-height: 1.2;
}

p {
	text-align: justify;
	hyphens: auto;
}

img {
	max-width: 100%;
}

header {
	max-width: 40rem;
	margin: 2rem auto;
	padding: 0 1rem;
	/*font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;*/
}

nav {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
}

nav a {
	text-decoration: none;
	color: #000;
	font-size: 1rem;
	padding: 0.25rem 0;
	border-bottom: 2px solid transparent;
	position: relative;
}

/* Vertical separator */
nav a:not(:last-child)::after {
	content: "|";
	position: absolute;
	right: -0.85rem;
	color: #999;
}

/* Hover/focus effect: subtle but obvious */
nav a:hover,
nav a:focus {
	border-bottom-color: #000;
}

/* Optional: indicate current page */
nav a[aria-current="page"] {
	border-bottom-color: #000;
	font-weight: 600;
}