: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;
  /* border: 1px solid var(--glass-border); */
  background: rgba(106, 143, 246, 0.90);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
  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;
}

/* ---------- 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%;
  }
}