: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: 90px 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;
}

.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 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%;
  /* the lead's flex gap is 12px; +12px here matches the design's 24px gap
     below the donate button */
  margin-top: 12px;
}

.progress__labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 12px;
  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.25);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  min-width: 20px;
  max-width: 100%;
  border-radius: 100px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(
    90deg,
    rgba(165, 189, 255, 0.9) 0%,
    rgba(106, 143, 246, 0.9) 100%
  );
  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);
  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) {
  .intro {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@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;
    min-height: 0;
  }
  .embla__container {
    height: 100%;
  }
  .embla__slide {
    height: 100%;
  }
}