:root {
  --color-primary: #2f6b46;
  --color-primary-dark: #1e4a2f;
  --color-accent: #c9873f;
  --color-accent-dark: #a66f2e;
  --color-text: #24292f;
  --color-background: #fdfbf7;
  --color-muted: #f1efe7;
  --color-border: #e2ded2;
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.5rem;
  --shadow-md: 0 6px 18px rgba(36, 41, 47, 0.08);
  --max-content-width: 60rem;
  --header-height: 4.75rem;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: var(--color-background);
  line-height: 1.5;
}

.container {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 1.5rem);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

.site-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: 0.02em;
  color: var(--color-primary-dark);
  text-decoration: none;
}

/* Hamburger menu toggle */

.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background-color: transparent;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.menu-icon,
.menu-icon::before,
.menu-icon::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-icon {
  position: relative;
}

.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-icon::before {
  transform: translateY(-6px);
}

.menu-icon::after {
  transform: translateY(6px);
}

.menu-toggle[aria-expanded="true"] .menu-icon {
  background-color: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-icon::before {
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-icon::after {
  transform: rotate(-45deg);
}

/* Off-canvas navigation panel */

.site-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 20;
  width: min(20rem, 85vw);
  height: 100%;
  background-color: var(--color-background);
  box-shadow: var(--shadow-md);
  padding: var(--spacing-xl) var(--spacing-lg);
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

.site-nav.is-open {
  transform: translateX(0);
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}

.nav-list a:hover,
.nav-list a:focus-visible {
  color: var(--color-primary-dark);
}

.nav-list a[aria-current="page"] {
  color: var(--color-primary-dark);
  font-weight: 800;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
  background-color: rgba(31, 41, 55, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .site-nav,
  .menu-icon,
  .menu-icon::before,
  .menu-icon::after {
    transition: none;
  }
}

/* Swiper container: full-height section-by-section paging below the sticky header */

.swiper {
  height: calc(100vh - var(--header-height));
  height: calc(100svh - var(--header-height));
}

/* Sections (Home, About, Contact) */

.section {
  display: grid;
  align-content: center;
  height: 100%;
  /* Paging between sections is handled entirely by Swiper - a section never
     scrolls its own contents, so its text needs to fit within the viewport.
     Padding scales with the smaller of width/height (vmin) so it shrinks on
     narrow phones and short windows alike, not just one dimension. */
  overflow: hidden;
  padding-top: clamp(1rem, 6vmin, 4rem);
  padding-bottom: clamp(1rem, 6vmin, 4rem);
}

.section:has(.page) {
  /* About/Contact text can still be taller than a very short viewport;
     top-align it so any overflow is trimmed only at the bottom instead of
     symmetrically (which could hide the top behind the sticky header).
     Home's hero doesn't use .page, so it stays centered. */
  align-content: start;
}

.section-alt {
  background-color: var(--color-muted);
}

/* Hero (Home section) */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--spacing-lg);
}

.hero h1 {
  max-width: 40rem;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary-dark);
}

.hero-tagline {
  max-width: 36rem;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: #445048;
}

.donate-button {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 700;
  color: #ffffff;
  background-color: var(--color-accent);
  border: none;
  border-radius: var(--radius-md);
  padding: 1rem 2.25rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.donate-button:hover,
.donate-button:focus-visible {
  background-color: var(--color-accent-dark);
}

.donate-note {
  font-size: 0.95rem;
  color: #555555;
}

/* Section content (About, Contact) */

.page h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0.5em;
  /* vmin (smaller of viewport width/height) keeps this in proportion on both
     narrow phones and short windows, instead of only reacting to width. */
  font-size: clamp(1.35rem, 7vmin, 2.75rem);
  color: var(--color-primary-dark);
}

.page p {
  max-width: 42rem;
  font-size: clamp(0.95rem, 3vmin, 1.15rem);
  line-height: 1.45;
  margin: 0 0 0.75em;
}

.page p:last-child {
  margin-bottom: 0;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  max-width: 32rem;
  margin-top: var(--spacing-lg);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-field label {
  font-weight: 600;
}

.form-field input,
.form-field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.85rem;
}

.form-field input:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.form-field textarea {
  resize: vertical;
}

.contact-alternate {
  margin-top: var(--spacing-lg);
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
  font-size: 0.9rem;
  color: #555555;
}