/* ============ About page ============ */

/* Active nav link */
.nav-links .nav-active {
  border-bottom: 2px solid var(--lime);
  padding-bottom: 2px;
}

/* ============ Header ============ */
.about-header {
  padding: clamp(40px,6vw,72px) clamp(24px,5vw,64px) clamp(28px,3vw,40px);
}
.about-kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.about-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px,6.5vw,80px);
  line-height: .95;
  letter-spacing: -.045em;
}
.about-title .highlight {
  display: inline-block;
  background: var(--ink);
  color: var(--lime-bright);
  padding: 0 .24em;
  border-radius: 16px;
}

/* ============ Bio ============ */
.about-bio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px,4vw,56px);
  padding: 0 clamp(24px,5vw,64px) clamp(40px,5vw,60px);
  align-items: start;
}
.bio-portrait {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 18px;
  border: 1px solid rgba(20,21,13,.22);
  background: linear-gradient(150deg, #edebe0 0%, #e1e0d2 48%, #e7ecd4 100%);
  display: flex;
  align-items: flex-end;
  padding: 22px;
  max-width: 420px;
}
.bio-placeholder {
  font-family: var(--mono);
  font-size: 12px;
  color: #8a8b7d;
}
.bio-lead {
  font-size: clamp(17px,1.7vw,22px);
  line-height: 1.55;
}
.bio-text p + p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
  margin-top: 18px;
}
.bio-emphasis { color: var(--ink); }
.bio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

/* ============ Stats (page overrides) ============ */
.about-stats {
  margin-bottom: clamp(40px,5vw,60px);
  padding: clamp(36px,5vw,60px);
}
.about-stats .stats-sentence {
  font-size: clamp(22px,3.2vw,38px);
  line-height: 1.28;
}

/* ============ Section headings ============ */
.about-heading {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px,4.5vw,48px);
  letter-spacing: -.03em;
  margin-bottom: 30px;
}

/* ============ Timeline ============ */
.timeline {
  padding: 0 clamp(24px,5vw,64px) clamp(40px,5vw,60px);
}
.timeline-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: clamp(16px,3vw,40px);
  border-top: 1px solid rgba(20,21,13,.3);
  padding: 24px 0;
}
.timeline-row:last-child {
  border-bottom: 1px solid rgba(20,21,13,.4);
}
.timeline-date {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
}
.timeline-role {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px,2.4vw,26px);
}
.timeline-org {
  font-size: 15px;
  color: var(--muted);
  margin: 4px 0 8px;
}
.timeline-desc {
  font-size: 15px;
  color: var(--body);
  max-width: 60ch;
}

/* ============ Expertise ============ */
.expertise {
  padding: clamp(20px,3vw,30px) clamp(24px,5vw,64px) clamp(40px,5vw,60px);
}
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.expertise-card {
  border-radius: 16px;
  padding: 24px;
}
.expertise-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--lime);
  background: var(--ink);
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
}
.expertise-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  margin: 12px 0 8px;
}
.expertise-list {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--body);
  line-height: 1.9;
}