.about-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(28px, 4vw, 64px);
}

.about-header__portrait { flex: none; }

.about-header__photo {
  width: min(260px, 42vw);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
}

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

.about-header__photo::before,
.about-header__photo::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border: 0 solid var(--color-rule-mark);
  pointer-events: none;
  z-index: 1;
}

.about-header__photo::before { top: 7px; left: 7px; border-top-width: 1px; border-left-width: 1px; }
.about-header__photo::after { bottom: 7px; right: 7px; border-bottom-width: 1px; border-right-width: 1px; }

.about-header__intro {
  flex: 1 1 420px;
  min-width: 0;
  padding-top: 6px;
}

.about-header__title {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 0.96;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

/* a .lead, a touch smaller than the hero's */
.about-header__lead {
  max-width: 620px;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 30px;
}

.xp {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 28px;
  padding: 24px 4px;
  border-bottom: 1px solid var(--color-line-soft);
  transition: background var(--t-color);
}

.xp:hover { background: var(--color-panel-hover); }

.xp:last-child { border-bottom-color: var(--color-line); }

.xp__date {
  flex: 0 0 190px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.xp__date--now { color: var(--color-accent); }

.xp__body {
  flex: 1 1 460px;
  min-width: 0;
  max-width: 760px;
}

.xp__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  margin-bottom: 10px;
}

.xp__platform {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.xp__list,
.xp__note {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--color-text-dim);
}

.xp__list { padding-left: 18px; }

.xp__list li::marker { color: var(--color-text-faint); }

@media (max-width: 700px) {
  .xp { padding: 20px 4px; }
}

.skills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.skill { padding: 22px 24px; }

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

.about-cols {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 56px);
}

.about-cols__col {
  flex: 1 1 340px;
  min-width: 0;
}

.about-cols__col + .about-cols__col {
  border-left: 1px solid var(--color-line);
  padding-left: clamp(24px, 3vw, 44px);
}

.about-cols .section-head--mb20 { margin-top: 40px; }

@media (max-width: 760px) {
  .about-cols__col + .about-cols__col { border-left: 0; padding-left: 0; }
}

.edu {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 24px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--color-line-soft);
  transition: background var(--t-color);
}

.edu:hover { background: var(--color-panel-hover); }

.edu--last { border-bottom-color: var(--color-line); }

.edu__years {
  flex: 0 0 130px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.edu__body {
  flex: 1 1 220px;
  min-width: 0;
}

.edu__school {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 4px;
}

.edu__field {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-dim);
}

.languages__row {
  padding: 12px 4px;
  border-bottom: 1px solid var(--color-line-soft);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-dim);
  transition: background var(--t-color);
}

.languages__row:hover { background: var(--color-panel-hover); }

.languages__row:last-child { border-bottom-color: var(--color-line); }