.about-main {
  flex: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 56px 72px;
  padding: 64px 0 48px;
}
.about-copy { flex: 1 1 520px; min-width: 0; max-width: 720px; }
.about-greeting { margin-bottom: 28px; font-size: 14px; color: var(--text-4); }
.caret {
  display: inline-block; width: 8px; height: 15px; margin-left: 4px;
  background: var(--text); vertical-align: -2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.about-name {
  font-size: clamp(56px, 8vw, 120px); line-height: .92; letter-spacing: -.04em; font-weight: 600;
}
.about-name span { display: block; }

.about-roles {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
  margin-top: 32px; font-size: 17px; color: var(--text-2);
}
.about-roles li { display: inline-flex; align-items: center; gap: 10px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text); flex: none; }
.dot.sys { background: var(--sys); }
.dot.dev { background: var(--dev); }

.about-bio {
  max-width: 560px; margin-top: 28px;
  font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; color: var(--text-3);
}
.about-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

.about-side { flex: 0 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.photo {
  aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.photo-ph { font-size: 13px; color: var(--text-5); }

.facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  font-size: 13px;
}
.fact { display: flex; flex-direction: column; gap: 4px; }
.fact dt { color: var(--text-5); }
.fact dd { color: var(--text-2); }

.page-about .page-end { margin-top: 0; }