:root {
  --ink: #2d2d2d;
  --frame-border: rgba(255, 255, 255, 0.5);
  --glass-bg: rgba(255, 255, 255, 0.5);
  --glass-border: rgba(255, 255, 255, 0.4);
  --edge: 42px; /* page / carousel left inset, kept in sync across breakpoints */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  position: relative;
  min-height: 100vh;
  font-family: "Source Sans 3", system-ui, sans-serif;
  color: var(--ink);
  overflow-x: hidden;
}

/* ---------- Background layers ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.bg__white {
  position: absolute;
  inset: 0;
  background: #fff;
}

.bg__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
}

.bg__blur {
  position: absolute;
  top: -44px;
  left: 0;
  width: 100%;
  height: calc(100% + 88px);
  object-fit: cover;
  opacity: 0.5;
  filter: blur(50px);
}

/* ---------- Decorative inner frame ---------- */
.frame {
  position: fixed;
  inset: 0;
  z-index: -1;
  border: 6px solid var(--frame-border);
  pointer-events: none;
}

/* ---------- Page layout ---------- */
/* `.page` constrains the header text; the carousel below breaks out full-width. */
.page {
  position: relative;
  z-index: 1;
  max-width: 1356px;
  margin: 0 auto;
  padding: 72px var(--edge) 0;
}

/* ---------- Intro / header ---------- */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 366px) minmax(0, 528px);
  gap: 145px;
  align-items: start;
  margin-bottom: 60px;
}

.intro__lead {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.sun {
  display: block;
}

.sun__container {
  display: inline-block;
  overflow: hidden;
  height: 42px;

  img {
    animation: shine 23s linear infinite;
  }
}

@keyframes shine {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.intro__title-block {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  width: 100%;
}

.title {
  margin: 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 400;
  font-size: 35px;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--ink);
}

/* Donate pill */
.donate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(106, 143, 246, 0.90);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(12.5px);
  color: #fff;
  font-size: 16px;
  line-height: 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.donate:hover {
  transform: translateY(-1px);
  /* background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); */
}

.donate__icon {
  flex: none;
}

/* Intro body text */
.intro__body {
  padding-top: 42px;
}

.intro__body p {
  max-width: 528px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}

.intro__note {
  margin-top: 24px !important;
  font-style: italic;
  font-size: 14px;
}

/* ---------- Donation progress bar ---------- */
.progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin-bottom: 7px;
}

.progress__labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
}

.progress__raised {
  color: #000;
}

.progress__goal {
  color: rgba(0, 0, 0, 0.5);
}

.progress__track {
  width: 100%;
  height: 7px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  min-width: 0; /* allow a true 0% (empty) state */
  max-width: 100%;
  background: #6A8FF6;
  transition: width 0.6s ease;
}

/* ---------- Gallery carousel (Embla) ---------- */
/* Full-bleed marquee: the photos stream edge-to-edge across the whole width. */
.embla {
  --slide-height: 530px;
  --slide-gap: 15px;
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom: var(--edge);
}

.embla__viewport {
  overflow: hidden;
}

.embla__container {
  display: flex;
  gap: var(--slide-gap);
  /* keep continuous auto-scroll buttery on the GPU */
  will-change: transform;
  touch-action: pan-y pinch-zoom;
}

.embla__slide {
  margin: 0;
  flex: 0 0 auto; /* width is driven by the image's aspect ratio */
  height: var(--slide-height);
  min-height: 350px; /* carousel never shrinks below this, even when filling height */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);

  &:first-child {
    margin-left: 16px;
  }
}

.embla__slide img {
  display: block;
  height: 100%;
  width: auto; /* preserve the photo's natural aspect ratio */
  -webkit-user-drag: none;
  user-select: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .frame {
    display: none;
  }

  .intro {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .intro__body {
    padding-top: 0;
  }
}

@media (max-width: 900px) {
  :root {
    --edge: 28px;
  }
  .page {
    padding-top: 56px;
  }
  .embla {
    --slide-height: 420px;
  }
}

@media (max-width: 560px) {
  .title {
    font-size: 30px;
  }
  .embla {
    --slide-height: 340px;
  }
}

/* Desktop: page fills the viewport height and the carousel grows to fill
   whatever space is left below the header. Slides take the full height and
   keep their aspect ratio (width follows from each photo). */
@media (min-width: 901px) {
  main {
    display: flex;
    flex-direction: column;
    height: 100vh; /* definite height so the slides' height:100% chain resolves */
    height: 100dvh;
  }
  .embla {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .embla__viewport {
    flex: 1 1 auto;
    /* match the slide's 350px floor so the viewport never clips the image */
    min-height: 350px;
  }
  .embla__container {
    height: 100%;
  }
  .embla__slide {
    height: 100%;
  }
}

/* ---------- Carousel-only page (gallery.html) ---------- */
/* The carousel fills the whole viewport at every width (the rules above only
   apply at >=901px), with symmetric top/bottom breathing room. */
.gallery-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}
.gallery-page .embla {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: var(--edge);
}
.gallery-page .embla__viewport {
  flex: 1 1 auto;
  /* match the slide's 350px floor so the viewport never clips the image */
  min-height: 350px;
}
.gallery-page .embla__container {
  height: 100%;
}
.gallery-page .embla__slide {
  height: 100%;
}