.farewell-page {
  min-height: 100vh;
  padding: clamp(1.75rem, 5vw, 3rem) var(--page-padding) clamp(3.5rem, 8vw, 4.5rem);
  overflow: hidden;
  background: var(--page-gradient);
  color: var(--background-dark);
}

/* HERO */

.farewell-hero {
  position: relative;
  max-width: var(--content-lg);
  margin: 0 auto var(--section-gap);
  padding:
    clamp(1rem, 4vw, 2.5rem)
    clamp(1rem, 15vw, 12rem)
    clamp(0.75rem, 3vw, 1.5rem);
  text-align: center;
}

.farewell-hero p {
  max-width: 42rem;
  margin: 0 auto clamp(0.9rem, 3vw, 1.4rem);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.55;
}

.farewell-subtitle {
  max-width: 44rem;
  margin: 0 auto clamp(1rem, 3vw, 1.5rem);
  font-family: Georgia, serif;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.name-script {
  display: inline-block;
  margin: clamp(0.75rem, 2.5vw, 1.2rem) 0;
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: clamp(3.4rem, 8vw, 6rem);
  line-height: 0.95;
  color: var(--highlight);
}

.farewell-intro {
  font-weight: 600;
}

/* SHARED PHOTO STYLE */

.paper-photo,
.collage-photo {
  background: var(--background-white);
  padding: var(--photo-padding) var(--photo-padding) var(--photo-bottom);
  border: 1px solid rgba(8, 21, 105, 0.08);
  box-shadow: var(--shadow-photo);
}

.paper-photo img,
.collage-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* HERO PHOTOS */
.hero-photo-row {
  display: contents;
}

.hero-photo {
  position: absolute;
  z-index: 3;
  width: clamp(8rem, 16vw, 13.75rem);
  aspect-ratio: 4 / 5;
}



.photo-left {
  left: clamp(-3rem, -5vw, -1rem);
  top: clamp(1rem, 3vw, 1.5rem);
  transform: rotate(-7deg);
}

.photo-right {
  right: clamp(-3rem, -5vw, -1rem);
  top: clamp(1rem, 4vw, 2rem);
  transform: rotate(6deg);
}

/* COLLAGE */

.fun-collage {
  position: relative;
  width: min(94%, var(--content-lg));
  min-height: clamp(42rem, 78vw, 54rem);
  margin: 0 auto;
}

.fun-collage::before {
  content: "";
  position: absolute;
  inset: 8% 4%;
  border-radius: clamp(1.5rem, 4vw, 2.6rem);
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(2px);
}

.collage-photo {
  position: absolute;
  z-index: 2;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.collage-photo::before {
  content: "";
  position: absolute;
  top: -0.65rem;
  left: 50%;
  width: clamp(4rem, 7vw, 5rem);
  height: clamp(0.9rem, 2vw, 1.15rem);
  background: rgba(226, 202, 154, 0.72);
  transform: translateX(-50%) rotate(-5deg);
}

.collage-photo:hover {
  z-index: 5;
  box-shadow:
    0 0.9rem 1.8rem rgba(8, 21, 105, 0.16),
    0 2rem 4rem rgba(8, 21, 105, 0.12);
}

/* DESKTOP COLLAGE POSITIONS */

.photo-a {
  width: min(38vw, 26rem);
  aspect-ratio: 4 / 3;
  left: 5%;
  top: 3%;
  transform: rotate(-5deg);
}

.photo-b {
  width: min(26vw, 18rem);
  aspect-ratio: 6 / 5;
  right: 8%;
  top: 5%;
  transform: rotate(6deg);
}

.photo-c {
  width: min(31vw, 21rem);
  aspect-ratio: 7 / 8;
  left: 37%;
  top: 21%;
  transform: rotate(3deg);
}

.photo-d {
  width: min(27vw, 18.75rem);
  aspect-ratio: 6 / 5;
  left: 3%;
  bottom: 18%;
  transform: rotate(8deg);
}

.photo-e {
  width: min(32vw, 22.5rem);
  aspect-ratio: 7 / 5;
  right: 3%;
  bottom: 17%;
  transform: rotate(-6deg);
}

.photo-f {
  width: min(20vw, 13.75rem);
  aspect-ratio: 6 / 5;
  left: 29%;
  bottom: 4%;
  transform: rotate(-8deg);
}

.photo-g {
  width: min(20vw, 13.75rem);
  aspect-ratio: 6 / 5;
  right: 28%;
  bottom: 3%;
  transform: rotate(5deg);
}

.photo-h {
  width: min(19vw, 13rem);
  aspect-ratio: 6 / 5;
  left: 18%;
  top: 42%;
  transform: rotate(-10deg);
}

.photo-a:hover { transform: rotate(-3deg) scale(1.02); }
.photo-b:hover { transform: rotate(4deg) scale(1.02); }
.photo-c:hover { transform: rotate(1deg) scale(1.02); }
.photo-d:hover { transform: rotate(6deg) scale(1.02); }
.photo-e:hover { transform: rotate(-4deg) scale(1.02); }
.photo-f:hover { transform: rotate(-6deg) scale(1.02); }
.photo-g:hover { transform: rotate(3deg) scale(1.02); }
.photo-h:hover { transform: rotate(-8deg) scale(1.02); }

/* TABLET */

@media (max-width: 900px) {
  .farewell-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(1rem, 4vw, 1.5rem) 0 clamp(1rem, 4vw, 1.5rem);
  }
  
  .hero-photo-row {
    order: -1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(0.75rem, 4vw, 1rem);
    width: 100%;
    margin-bottom: clamp(1rem, 5vw, 1.4rem);
  }
  .hero-photo {
    position: static;
    display: inline-block;
    width: min(42%, 9.5rem);
    margin: 0;
  }

  .farewell-hero::before {
    content: "";
    order: -1;
    display: none;
  }

  .photo-left,
  .photo-right {
    inset: auto;
  }

  .photo-left {
    transform: rotate(-5deg);
  }

  .photo-right {
    transform: rotate(5deg);
  }

  .farewell-subtitle {
    max-width: 42rem;
    font-size: clamp(1.8rem, 7vw, 3rem);
  }

  .farewell-hero p {
    max-width: 90%;
    font-size: clamp(1rem, 3.8vw, 1.15rem);
  }

  .name-script {
    font-size: clamp(3.4rem, 15vw, 5.2rem);
  }

  .fun-collage {
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 4vw, 1.4rem);
    margin-top: clamp(1.5rem, 6vw, 2rem);
  }

  .fun-collage::before {
    display: none;
  }

  .collage-photo {
    position: relative;
    inset: auto;
    width: min(92vw, 26rem);
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 0 auto;
  }

  .photo-a,
  .photo-b,
  .photo-c,
  .photo-d,
  .photo-e,
  .photo-f,
  .photo-g,
  .photo-h {
    width: min(92vw, 26rem);
    aspect-ratio: 4 / 3;
  }

  .photo-a { transform: rotate(-3deg); }
  .photo-b { transform: rotate(3deg); }
  .photo-c { transform: rotate(-2deg); }
  .photo-d { transform: rotate(4deg); }
  .photo-e { transform: rotate(-3deg); }
  .photo-f { transform: rotate(2deg); }
  .photo-g { transform: rotate(-2deg); }
  .photo-h { transform: rotate(3deg); }
}

/* SMALL PHONES */

@media (max-width: 520px) {
  .farewell-page {
    padding-inline: clamp(0.8rem, 4vw, 1.1rem);
  }

  .farewell-hero {
    padding-top: 0.75rem;
  }

  .hero-photo {
    width: min(45%, 8.5rem);
  }

  .paper-photo,
  .collage-photo {
    padding-bottom: clamp(1.9rem, 8vw, 2.5rem);
  }

  .farewell-subtitle {
    max-width: 21rem;
    font-size: clamp(1.8rem, 8.8vw, 2.35rem);
    line-height: 1.12;
  }

  .farewell-hero p {
    max-width: 21rem;
    font-size: 1rem;
    line-height: 1.55;
  }

  .name-script {
    margin-block: 0.7rem;
  }
}