/* About Page — Profile Section */
.about-profile {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-block-end: 2rem;
}

.about-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
  flex-shrink: 0;
  border: 3px solid var(--color-border, #663399);
}

.about-bio p {
  margin-block: 0.4em;
}

@media (max-width: 37.4em) {
  .about-profile {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* About Page — Timeline */
.about-timeline h2 {
  margin-block-end: 1rem;
}

.timeline-track {
  position: relative;
  padding-inline-start: 2rem;
}

.timeline-track::before {
  content: '';
  position: absolute;
  inset-inline-start: 0.45rem;
  inset-block-start: 0.25rem;
  inset-block-end: 0;
  width: 2px;
  background-color: var(--color-border, #663399);
}

/* Timeline Item */
.timeline-item {
  position: relative;
  padding-block-end: 1.5rem;
}

.timeline-item:last-child {
  padding-block-end: 0;
}

.timeline-marker {
  position: absolute;
  inset-inline-start: -1.65rem;
  inset-block-start: 0.35rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-primary, #dc143c);
  border: 2px solid var(--color-background, #ffffff);
}

.timeline-content {
  padding-block-start: 0;
}

.timeline-year {
  font-family: 'Roboto Mono', monospace;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-primary, #dc143c);
}

.timeline-title {
  font-size: 1rem;
  margin-block: 0.2em;
}

.timeline-title::before {
  content: '' !important;
}

.timeline-icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.15em;
  margin-inline-end: 0.4em;
  border: none;
  border-radius: 0;
}

.timeline-role {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--color-text-muted, #737373);
  margin-block-end: 0.3rem;
}

.timeline-desc {
  font-size: 0.9rem;
  margin-block: 0.3em;
  color: var(--color-text-muted, #737373);
}