/* About page */

.page-about .nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
}
.page-about .footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
}

.page-about .scroll-area {
  position: fixed; left: 0; right: 0;
  overflow-y: auto; overflow-x: clip;
}
.page-about .scroll-area::-webkit-scrollbar { display: none; }
.page-about .scroll-area { scrollbar-width: none; }

.page-about .g6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 20px;
  padding: 0 20px;
  padding-bottom: min(15vh, 120px);
}

/* Title row */
.page-about .about-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  font-size: var(--type-sm-semi-size);
  font-weight: 500;
  letter-spacing: var(--type-sm-semi-tracking);
  line-height: var(--type-sm-semi-lh);
  color: var(--muted);
  border-bottom: 1px solid var(--divider-subtle);
}

/* Bio */
.page-about .bio {
  grid-column: 1 / -1;
  margin: 0;
  padding: 20px 0 0;
  font-size: var(--type-sm-semi-size);
  font-weight: 500;
  line-height: var(--type-sm-semi-lh);
  letter-spacing: var(--type-sm-semi-tracking);
  color: var(--text);
  max-width: 44rem;
}

/* Quick links */
.page-about .sec-ql {
  grid-column: 1 / -1;
  padding: 40px 0 0;
}

/* Section label — matches case-lbl */
.page-about .sec-lbl {
  font-size: var(--type-sm-semi-size);
  font-weight: 500;
  letter-spacing: var(--type-sm-semi-tracking);
  line-height: var(--type-sm-semi-lh);
  color: var(--text);
  margin-bottom: 10px;
}

.page-about .ql-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.page-about .ql-pill {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--divider-subtle);
  border-radius: 20px; padding: 4px 10px;
  font-size: var(--type-sm-reg-size); font-weight: 400; color: #ffffff;
  background: #000000;
  letter-spacing: var(--type-sm-reg-tracking); line-height: var(--type-sm-reg-lh);
  transition: opacity .2s;
  text-decoration: none;
}
[data-theme="dark"] .page-about .ql-pill {
  color: #000000;
  background: #ffffff;
}
.page-about .ql-pill:hover { opacity: .55; }
.page-about .ql-arrow { font-size: var(--type-sm-reg-size); opacity: .45; line-height: 1; }

/* Full-width divider */
.page-about .about-sep {
  grid-column: 1 / -1;
  border: none;
  margin: 40px 0 0;
}

/* Experience (cols 1–3) */
.page-about .sec-exp {
  grid-column: 1 / 4;
  padding: 20px 0 0;
}

/* Education (cols 4–6) */
.page-about .sec-edu {
  grid-column: 4 / 7;
  padding: 20px 0 0;
}

.page-about .sec-exp .sec-lbl,
.page-about .sec-edu .sec-lbl,
.page-about .sec-nw  .sec-lbl { margin-bottom: 10px; }

/* Experience / Education rows */
.page-about .exp-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider-subtle);
  font-size: var(--type-sm-reg-size);
  font-weight: 400;
  letter-spacing: var(--type-sm-reg-tracking);
  line-height: var(--type-sm-reg-lh);
}
.page-about .exp-role { color: var(--text); }
.page-about .exp-co   { color: var(--text); }

/* Noteworthy (cols 1–3) */
.page-about .sec-nw {
  grid-column: 1 / 4;
  padding: 20px 0 0;
}

.page-about .nw-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider-subtle);
  font-size: var(--type-sm-reg-size);
  font-weight: 400;
  color: var(--text);
  letter-spacing: var(--type-sm-reg-tracking);
  line-height: var(--type-sm-reg-lh);
  text-decoration: none;
  transition: opacity .2s;
}
.page-about .nw-item:hover { opacity: .55; }
.page-about .nw-arrow { font-size: var(--type-sm-reg-size); color: var(--text); }

@media (max-width: 768px) {
  .page-about .nav    { display: none; }
  .page-about .footer { display: none; }
  .page-about .mobile-header     { border-bottom: 1px solid var(--divider-strong); }
  .page-about .mobile-bottom-nav { border-top: 1px solid var(--divider-strong); }

  .page-about .g6 { padding: 0 10px; column-gap: 10px; }
  .page-about .bio     { padding: 10px 0 0; }
  .page-about .sec-ql  { padding: 20px 0 0; }
  .page-about .about-sep { margin: 20px 0 0; }
  .page-about .sec-exp { grid-column: 1 / -1; }
  .page-about .sec-edu { grid-column: 1 / -1; }
  .page-about .sec-nw  { grid-column: 1 / -1; }
}