.about-grid{
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--gap);
    margin-top: clamp(6rem, 6vw, 10rem);
    padding-bottom: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  
  /* your photo cluster */
  .about-photos{
    position: relative;
    min-height: clamp(640px, 70vw, 900px);
    margin-left: clamp(0rem, 2vw, 3rem);
    min-height: clamp(620px, 55vw, 820px);
  }
  
  /* base tile */
  .about-photo{
    position: absolute;
    width: min(260px, 38vw);
    aspect-ratio: 3 / 4;
    border-radius: 1rem;
    overflow: hidden;
    margin: 0;
  
    transform: scale(1);
    transition: transform 260ms ease;
    z-index: 1;
  }
  
  .about-photo img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  
  /* stagger positions (tweak numbers to match your layout) */
  .about-photo.p1{ left: 0; top: 0; }
  .about-photo.p2{ left: 30%; top: 22%; }
  .about-photo.p3{ left: 58%; top: 45%; }
  
p,
.detail-right p,
.about-copy{
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.2; /* 1.5–1.65 sweet spot */
}


.about-copy{
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  margin-top: clamp(3rem, 6vw, 7rem);
  max-width: 24ch;
}
  .about-copy:last-child{ margin-bottom: 0; }


  /* scale the WHOLE tile */
  @media (hover: hover){
    .about-photo:hover{
      transform: translateZ(0) scale(1.06);
      z-index: 5; /* bring above others */
    }
  }
  
  /* mobile: stack instead of absolute */
  @media (max-width: 900px){
    .about-grid{
      grid-template-columns: 1fr;
    }
  
    .about-photos{
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--gap);
      min-height: auto;
    }
  
    .about-photo{
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 10; /* or keep 3/4 if you prefer */
    }
  
    .about-photo.p1,
    .about-photo.p2,
    .about-photo.p3{ left: auto; top: auto; }
  }