/* ============ ABOUT PAGE ============ */

/* ---- Story ---- */
.ab-story {
  max-width: var(--container);
  margin: 0 auto;
  padding: 4.5rem 2rem 5rem;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3.5rem;
  align-items: center;
}
.ab-story-text p { margin-top: 1.1rem; max-width: 56ch; font-size: 1.02rem; }
.ab-story-text p:first-of-type { margin-top: 1.3rem; }

.ab-frame {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(0,0,0,0.4);
}
.ab-frame svg { width: 100%; display: block; }

/* ---- Timeline ---- */
.ab-timeline {
  max-width: var(--container);
  margin: 0 auto;
  padding: 3rem 2rem 6rem;
}
.timeline-track {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding-left: 2.4rem;
}
.timeline-line {
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--orange), var(--blue));
  opacity: 0.5;
}
.timeline-item {
  position: relative;
  padding-bottom: 2.6rem;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: -2.4rem;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 0 4px var(--bg), 0 0 16px rgba(255,122,69,0.5);
}
.timeline-year {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--orange);
  margin-bottom: 0.35rem;
}
.timeline-content h4 { margin-bottom: 0.4rem; }
.timeline-content p { font-size: 0.92rem; max-width: 50ch; }

/* ---- Skills / expertise meters ---- */
.ab-skills {
  max-width: 820px;
  margin: 0 auto;
  padding: 2rem 2rem 6rem;
}
.skills-list { display: flex; flex-direction: column; gap: 1.6rem; }
.skill-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 0.92rem;
  margin-bottom: 0.55rem;
}
.skill-pct { color: var(--text-muted); font-family: var(--font-body); font-size: 0.85rem; }
.skill-track {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  overflow: hidden;
}
.skill-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--grad);
  transition: width 1.3s cubic-bezier(.2,.8,.2,1);
}

@media (max-width: 900px) {
  .ab-story { grid-template-columns: 1fr; }
  .ab-story-visual { order: -1; max-width: 320px; margin: 0 auto; }
}