/*———————————————————————————————————————————————
  1) Variables & Resets
———————————————————————————————————————————————*/
:root {
	--nav-height: 8rem; /* adjust to your real nav height */
	--layout-spacing: max(4vh, 2rem); /* your base gap */
	--section-gap: calc(var(--layout-spacing) * 3);
	--max-width: 70ch;
}

* {
	box-sizing: border-box;
	margin: 0;
}

html {
	scroll-behavior: smooth;
	/* push in-page links below the fixed nav */
	scroll-padding-top: calc(var(--nav-height) + var(--layout-spacing));
	scroll-padding-bottom: var(--layout-spacing);
}

/*———————————————————————————————————————————————
  2) Body & Container
———————————————————————————————————————————————*/
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding: var(--nav-height) clamp(1rem, 5vw, 3rem) 1rem;
	font: 1.25rem/1.5 'Tinos',  Georgia, "Times New Roman", serif;
	color: #2c2c2c;
}

/* all direct children except the nav get centered & width capped */
body > *:not(nav, footer) {
	width: min(100%, var(--max-width));
	margin: var(--layout-spacing) auto 0;
}

h1 {
  font-size: 2.5rem;
  text-align: center;
}
h1, h2, h3 {
  font-family: 'Poppins', Georgia, "Times New Roman", serif;
  font-weight: 600;
  color: #333;
}
/*———————————————————————————————————————————————
  3) Nav (single rule, full-bleed & fixed)
———————————————————————————————————————————————*/
body > nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--nav-height);
	background: #E195AB;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 2rem; /* horizontal padding only */
	z-index: 1000;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
/* ——————————————————————————————————————————————
  Nav: Brand & Logo
   —————————————————————————————————————————————— */
nav .brand {
	display: flex;
	text-decoration: none;
}

.logo-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.logo-container img {
	max-height: calc(var(--nav-height) - 2rem);
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}

.site-title {
	margin-top: 0.5rem;
	font-size: 1.2rem; /* slightly smaller */
	font-weight: bold;
	color: #333;
	text-decoration: none; /* no underline */
}

/* ——————————————————————————————————————————————
  Nav: Links
  —————————————————————————————————————————————— */
.nav-links {
	display: flex;
	align-items: center;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-links a {
	font-size: 1.25rem; /* smaller font */
	font-weight: 600;
	color: #333;
	text-decoration: none; /* remove underline */
	transition: color 0.2s ease, transform 0.2s ease;
}

.nav-links a:hover {
	color: rgb(0, 128, 68);
	transform: translateY(-2px); /* slight “pop” */
}

/* ——————————————————————————————————————————————
  Nav: Burger (mobile)
   —————————————————————————————————————————————— */
.burger-menu {
	display: none;
	background: none;
	border: none;
	font-size: 1.75rem;
	cursor: pointer;
}

/* show/hide mobile menu as before… */
@media (max-width: 768px) {
	.burger-menu {
		display: block;
	}
	.nav-links {
		display: none; /* …etc. */
	}
	.nav-links.active {
		display: flex; /* …etc. */
	}
}

/*———————————————————————————————————————————————
  4) Section Cards (simplified, alternating colors)
———————————————————————————————————————————————*/
section {
	margin: var(--section-gap) auto; /* big gap above each card */
	padding: 2rem;
	width: 100%;
	border-radius: 1rem;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	background: inherit; /* will be set per nth-of-type */
	color: inherit; /* ditto */
	transition: none; /* no hover pop any more */
}
/* First section: half the usual top gap */
section:first-of-type {
  margin-top: calc(var(--section-gap) / 2);
}

section h2 {
  margin: 1rem 0;
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
}

/* odd sections (1, 3, 5…) */
section:nth-of-type(odd) {
	background: #ecebde;
	color: #181c14;
}

/* even sections (2, 4, 6…) */
section:nth-of-type(even) {
	background: #d7d3bf;
	color: #181c14;
}

/* collapse back to single gap on mobile */
@media (max-width: 768px) {
	section {
		margin: var(--layout-spacing) auto; /* single base gap */
	}
}
/* straighten stack on mobile */
@media (max-width: 768px) {
	section {
		margin: var(--layout-spacing) auto;
		transform: none !important;
		z-index: auto;
	}
	.nav-links {
		display: none;
	}
	.nav-links.active {
		display: flex;
		flex-direction: column;
		position: absolute;
		top: var(--nav-height);
		right: 0;
		background: #fff;
		padding: 1rem;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}
	.burger-menu {
		display: block;
	}
}

/*———————————————————————————————————————————————
  5) Other Utilities
———————————————————————————————————————————————*/
article * + * {
	margin-top: 1em;
}

:is(h1, h2, h3) {
	line-height: 1.2;
}
:is(h1, h2) {
	max-width: 40ch;
}
:is(h2, h3):not(:first-child) {
	margin-top: 2em;
}

a {
	color: #3c3d37;
	text-underline-offset: 0.08em;
}
a:focus {
	outline: 1px solid currentColor;
	outline-offset: 0.2em;
}

article img {
	display: block;
	width: 100%;
	object-fit: cover;
	margin: 2rem auto;
}
@supports (aspect-ratio: 1) {
	article img {
		aspect-ratio: 3/2;
		max-height: none;
	}
}

code:not([class*="language"]) {
	font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
	font-size: 1.75ex;
	background: rgba(0, 0, 0, 0.1);
	padding: 0 0.15em;
}

blockquote {
	margin: 2rem 0;
	padding: 0.5em 1rem;
	border-left: 3px solid rgba(0, 0, 0, 0.35);
	background: rgba(0, 0, 0, 0.05);
	border-radius: 0 0.25rem 0.25rem 0;
}

body > footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--nav-height);
	background: rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2rem; /* horizontal padding only */
	z-index: 1001;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}