/* ── About Section ── */
#about {
  position: relative;
  width: 100%;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 4rem) 2rem;
}

.about-center {
  position: relative;
  z-index: 1;
  max-width: min(580px, 90%);
  text-align: center;
}

.about-greeting {
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  color: #888;
  margin-bottom: 0.25rem;
  text-align: center;
}

.about-name {
  font-family: 'Sail', cursive;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: #DC7A0B;
  margin-bottom: 1rem;
}

.about-bio {
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  line-height: 26px;
  color: #444;
  text-align: center;
  border-top: 1px solid #ccc;
  padding-top: 1rem;
  margin-top: 1rem;
}

.about-bold {
  max-width: 100%;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 74px);
  font-style: italic;
  line-height: 1.15;
  text-align: center;
  color: #031868;
}

/* ── Surrounding images ── */
.about-img {
  position: absolute;
  width: clamp(90px, 11vw, 158.59px);
  height: clamp(115px, 14vw, 202.77px);
  border-radius: 16px;
  overflow: hidden;
  opacity: 1;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.about-img--tl:hover { transform: rotate(25.14deg) translateY(-5rem); }
.about-img--tr:hover { transform: rotate(-25.14deg) translateY(-5rem); }
.about-img--bl:hover { transform: rotate(-25.14deg) translateY(5rem); }
.about-img--br:hover { transform: rotate(25.14deg) translateY(5rem); }

.about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-img--tl { top: 115px; left: clamp(1rem, 9vw, 128px); transform: rotate(25.14deg); }
.about-img--tr { top: 115px; right: clamp(1rem, 9vw, 128px); transform: rotate(-25.14deg); }
.about-img--bl { bottom: 115px; left: clamp(1rem, 9vw, 128px); transform: rotate(-25.14deg); }
.about-img--br { bottom: 115px; right: clamp(1rem, 9vw, 128px); transform: rotate(25.14deg); }

@media (max-width: 768px) {
  #about {
    flex-direction: column;
    padding: 2rem 1rem;
    min-height: unset;
  }

  .about-img--tr,
  .about-img--bl,
  .about-img--br { display: none; }

  .about-img--tl {
    position: relative;
    top: unset;
    left: unset;
    transform: rotate(0deg);
    width: 120px;
    height: 154px;
    margin-bottom: 1.5rem;
    align-self: center;
  }

  .about-img--tl:hover { transform: translateY(-5rem); }
  .about-center { max-width: 100%; }

  .about-bold {
    width: 100%;
    height: auto;
  }
}