/* About page layout and styles */
.about-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 16px;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--gap) * 1.5);
}

.about-block { 
  transform: translateY(0) scale(1);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 160ms ease;
  will-change: transform, opacity;
}
.about-block.initial-hide {
  opacity: 0;
  transform: translateY(70px) scale(0.98);
  pointer-events: none;
}

/* Portrait card */
.photo-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--outer-radius);
  overflow: hidden;
  background: var(--color1);
}
.photo-wrap.skeleton {
  background: linear-gradient(90deg, #d0d0d0 25%, #e3e3e3 37%, #d0d0d0 63%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
}
.photo-wrap.skeleton .photo-img { opacity: 0; }
.photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 160ms ease, opacity 160ms ease;
}
.photo-wrap:hover .photo-img { filter: grayscale(0); }

/* Text content */
.bio-text p {
  margin: 0 0 10px;
  font-size: var(--size-body);
  line-height: var(--line-height);
  color: var(--color-text);
}

.about-sections { margin-top: calc(var(--gap) * 1.5); }
.section-title {
  margin: 16px 0 var(--spacing-title-bottom);
  font-size: var(--size-title-h2);
  line-height: 1.1;
  color: var(--color1);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}
.entries { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  display: grid; 
  gap: var(--gap); 
}

.entry .period {
  display: inline-block;
  margin-right: 8px;
  color: var(--color5);
  font-size: var(--size-caption);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
}
.entry .role {
  display: inline-block;
  color: var(--color1);
  font-size: var(--size-body);
  font-weight: var(--weight-bold);
}
.entry .details {
  display: block;
  margin-top: 4px;
  color: var(--color5);
  font-size: var(--size-caption);
}

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}