/* ─── PHOTO OVERLAP CARD ─── */
.ab-photo-card {
  width: 180px;
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: calc(-1 * (var(--pad-section) + 72px));
  margin-bottom: 40px;
  position: relative;
  z-index: 5;
  box-shadow: 0 16px 48px rgba(0,0,0,0.28);
  border: 3px solid var(--paper);
}
.ab-photo-card img {
  width: 100%;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 8%;
  filter: grayscale(100%) contrast(1.08);
}

/* ─── BIO INTRO ─── */
.ab-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.ab-intro-left { padding: var(--pad-section) var(--pad-x); border-right: 1px solid var(--faint); }
.ab-intro-right { padding: var(--pad-section) var(--pad-x); background: var(--warm); display: flex; flex-direction: column; justify-content: center; }

/* ─── PROFILE PHOTO ─── */
.ab-photo {
  width: 168px;
  height: 168px;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 36px;
  border: 1px solid var(--faint);
  background: var(--warm);
  flex-shrink: 0;
}
.ab-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.ab-bio { font-size: 17px; color: var(--mid); font-weight: 300; line-height: 1.85; margin-bottom: 22px; }
.ab-bio:last-child { margin-bottom: 0; }
.ab-bio strong { color: var(--ink); font-weight: 500; }

/* ─── PRINCIPLE LIST (right side of intro) ─── */
.ab-principles { display: flex; flex-direction: column; }
.ab-principle { padding: 22px 0; border-bottom: 1px solid var(--faint); display: flex; gap: 18px; }
.ab-principle:first-child { padding-top: 0; }
.ab-principle:last-child { border-bottom: none; padding-bottom: 0; }
.ab-principle-num { font-family: var(--font-head); font-size: 12px; font-weight: 700; color: var(--accent); min-width: 22px; padding-top: 2px; }
.ab-principle-title { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.ab-principle-desc { font-size: 14px; color: var(--mid); font-weight: 300; line-height: 1.6; }

/* ─── CAPABILITY CLUSTERS ─── */
.ab-clusters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--faint); border: 1px solid var(--faint); border-radius: var(--radius); overflow: hidden; margin-top: 8px; }
.ab-cluster { background: var(--paper); padding: 36px; transition: background var(--transition); }
.ab-cluster:hover { background: var(--warm); }
.ab-cluster-name { font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.ab-cluster-desc { font-size: 14px; color: var(--mid); font-weight: 300; line-height: 1.7; }
.ab-cluster-featured { grid-column: 1 / -1; border-left: 3px solid var(--accent); padding-left: 33px; }
.ab-cluster-featured .ab-cluster-name { color: var(--accent); }

/* ─── TIMELINE ─── */
.ab-timeline { max-width: 760px; margin: 8px auto 0; }
.ab-tl-item { display: grid; grid-template-columns: 130px 1fr; gap: 28px; padding: 24px 0; border-bottom: 1px solid var(--faint); }
.ab-tl-item:last-child { border-bottom: none; }
.ab-tl-period { font-size: 13px; color: var(--accent); font-weight: 500; padding-top: 2px; }
.ab-tl-role { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.ab-tl-org { font-size: 14px; color: var(--mid); font-weight: 500; margin-bottom: 10px; }
.ab-tl-desc { font-size: 14px; color: var(--mid); font-weight: 300; line-height: 1.65; }

/* ─── TOOLS ─── */
.ab-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 8px; }
.ab-tool-cat-title { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); font-weight: 500; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--faint); }
.ab-tool-tags { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 900px) {
  .ab-photo-card {
    float: right;
    margin-top: -48px;
    margin-left: 24px;
    margin-bottom: 24px;
    width: 130px;
  }
  .ab-intro { grid-template-columns: 1fr; }
  .ab-intro-left { border-right: none; border-bottom: 1px solid var(--faint); }
  .ab-clusters { grid-template-columns: 1fr; }
  .ab-tools { grid-template-columns: 1fr; }
  .ab-tl-item { grid-template-columns: 1fr; gap: 8px; }
}