/* =============================================================
   pages/about.css — Extended About / Who Am I page
   ============================================================= */

.about-page {
  padding: 64px 235px 80px;
}

.about-page__header {
  margin-bottom: 56px;
}

.about-page__title {
  font-family:    var(--font-headings);
  font-size:      var(--fs-48);
  font-weight:    var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height:    56px;
  color:          var(--white);
  margin-bottom:  12px;
}

.about-page__sub {
  font-family:    var(--font-mono);
  font-size:      var(--fs-16);
  /* mono tokens: 16px -> <=20px */
  font-weight:    var(--mono-fw-lte20);
  letter-spacing: var(--mono-ls-lte20);
  color:          var(--gray-900);
}

/* Two-column layout: bio | AI */
.about-page__grid {
  display:               grid;
  grid-template-columns: 1fr 420px;
  gap:                   64px;
  align-items:           start;
}

/* Bio column */
.about-page__bio-col h2 {
  font-family:    var(--font-headings);
  font-size:      var(--fs-28);
  font-weight:    var(--fw-display);
  letter-spacing: var(--ls-display);
  color:          var(--white);
  margin-bottom:  16px;
}

.about-page__bio-col p {
  font-family:   var(--font-text);
  font-size:     var(--fs-16);
  line-height:   26px;
  color:         var(--text-body);
  margin-bottom: 24px;
  text-align:    justify;
}

/* Timeline / experience list */
.timeline {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            24px;
  margin-top:     32px;
}

.timeline__item {
  display:        flex;
  gap:            16px;
  padding-bottom: 24px;
  border-bottom:  1px solid var(--purple-card-border);
}
.timeline__item:last-child { border-bottom: none; }

.timeline__dot {
  width:          12px;
  height:         12px;
  border-radius:  50%;
  background:     var(--purple-500);
  flex-shrink:    0;
  margin-top:     6px;
}

.timeline__role {
  font-family:   var(--font-headings);
  font-size:     var(--fs-16);
  font-weight:   600;
  color:         var(--white);
  margin-bottom: 2px;
}

.timeline__company {
  font-family: var(--font-mono);
  font-size:   var(--fs-13);
  /* mono tokens: 13px -> <=20px */
  font-weight:    var(--mono-fw-lte20);
  letter-spacing: var(--mono-ls-lte20);
  color:       var(--purple-900);
  margin-bottom: 6px;
}

.timeline__desc {
  font-family: var(--font-text);
  font-size:   var(--fs-14);
  line-height: 22px;
  color:       var(--gray-900);
}

/* Skills teaser — links to /skills page */
.skills-teaser {
  margin-top: 48px;
}

.skills-teaser h2 {
  font-family:   var(--font-headings);
  font-size:     var(--fs-28);
  font-weight:   600;
  color:         var(--white);
  margin-bottom: 12px;
}

.skills-teaser p {
  font-family:   var(--font-text);
  font-size:     var(--fs-16);
  line-height:   26px;
  color:         #888;
  margin-bottom: 16px;
}

.skills-teaser__link {
  display:        inline-flex;
  align-items:    center;
  font-family:    var(--font-mono);
  font-size:      var(--fs-13);
  font-weight:    500;
  letter-spacing: 0.04em;
  color:          #c97fff;
  text-decoration: none;
  transition:     color 0.15s;
}

.skills-teaser__link:hover { color: #e0b8ff; }

/* AI column (sticky on desktop) */
.about-page__ai-col {
  position: sticky;
  top:      calc(var(--topbar-h) + 24px);
}

/* ── Responsive ──────────────────────────────────────────────*/
@media (max-width: 1200px) {
  .about-page { padding-left: 100px; }
}

@media (max-width: 1024px) {
  .about-page__grid { grid-template-columns: 1fr; }
  .about-page__ai-col { position: static; }
}

@media (max-width: 900px) {
  .about-page { padding: 40px; }
  .about-page__title { font-size: var(--fs-36); }
}

@media (max-width: 640px) {
  .about-page { padding: 24px 20px; }
}