.about {
  padding: 40px 20px;
}

.about .bio {
  background: radial-gradient(circle at 0% 0%, rgba(255, 180, 255, 0.20), transparent 55%),
              rgba(15, 0, 30, 0.82);
  border-radius: var(--radius);
  padding: 26px 28px;
  border: 1px solid rgba(255, 190, 255, 0.45);
  backdrop-filter: blur(22px);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.02);
}

.about .bio h2,
.about .bio h3 {
  color: #FCE9FF;
  margin-top: 0;
}

.about .bio p {
  color: #E4C8F4;
  line-height: 1.6;
}

.about .bio em,
.about .bio .signature {
  color: #FFCFF6;
}

.about .portrait {
  width: 190px;
  height: 190px;
  border-radius: 999px;
  object-fit: cover;
  border: 3px solid rgba(255, 230, 255, 0.85);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

.grid {
  display: grid;
  gap: 24px;
}

.grid.two {
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
}

@media (max-width: 900px) {
  .grid.two {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: left;
  }

  .about .bio {
    width: 100%;
  }
}