/* ============================================================
   KP Personal Office - about page layout
   Reuses tokens.css + base.css; adds bio + CV specifics.
   ============================================================ */

.about-hero { padding-block: clamp(3rem, 2rem + 6vw, 6rem) var(--space-12); }
.about-hero__inner {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 60rem) {
  .about-hero__inner { grid-template-columns: 1.25fr 0.75fr; gap: var(--space-16); }
}
.about-hero h1 {
  font-size: var(--display-sm);
  line-height: var(--leading-tight);
  margin-block: var(--space-6) var(--space-6);
  max-width: 14ch;
}
.about-hero h1 em { font-style: italic; color: var(--evergreen); font-weight: 420; }
.about-hero__lede { font-size: var(--text-lg); color: var(--ink-body); max-width: 46ch; }

/* portrait - drop a real photo in later (see comment in about.html) */
.portrait {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  gap: var(--space-4);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--evergreen-tint), transparent 70%),
    var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.portrait__mark {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 6vw, 5rem);
  font-weight: 500;
  color: var(--evergreen);
  letter-spacing: 0.02em;
}
.portrait__cap {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* bio prose */
.bio { display: grid; gap: var(--space-6); }
.bio p { font-size: var(--text-lg); color: var(--ink-body); max-width: var(--measure); }
.bio p.lead-in { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.34; color: var(--ink); letter-spacing: -0.01em; max-width: 32ch; }
.bio strong { color: var(--ink); font-weight: 600; }

/* CV / background list */
.cv { display: grid; gap: 0; border-top: 1px solid var(--line); }
.cv__row {
  display: grid;
  gap: var(--space-2) var(--space-8);
  grid-template-columns: 1fr;
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease-out);
}
@media (min-width: 48rem) {
  .cv__row { grid-template-columns: 13rem 1fr; align-items: baseline; }
}
.cv__row:hover { background: var(--paper-sunk); }
.cv__place { font-family: var(--font-display); font-size: var(--text-lg); color: var(--ink); }
.cv__where { display: block; font-family: var(--font-text); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-mute); margin-top: 0.35rem; }
.cv__role { font-weight: 600; color: var(--ink); margin-bottom: 0.3rem; }
.cv__note { font-size: var(--text-base); color: var(--ink-body); max-width: 52ch; }

/* origin pull block */
.origin {
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  display: grid;
  gap: var(--space-4);
  position: relative;
}
.origin .eyebrow { margin-bottom: var(--space-2); }
.origin blockquote {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.34;
  color: var(--ink);
  letter-spacing: -0.01em;
  max-width: 40ch;
}
.origin blockquote em { font-style: italic; color: var(--evergreen); }

/* founders */
.founders { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 56rem) { .founders { grid-template-columns: 1fr 1fr; align-items: start; } }
.founder { padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); display: grid; gap: var(--space-4); align-content: start; }
.founder__head { display: flex; align-items: center; gap: var(--space-4); }
.founder__mark {
  flex: none;
  width: 3.4rem; height: 3.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--evergreen);
  background: var(--evergreen-tint);
  color: var(--evergreen);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}
.founder__name { font-family: var(--font-display); font-size: var(--text-lg); color: var(--ink); line-height: 1.12; }
.founder__role { display: block; font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-mute); margin-top: 0.3rem; }
.founder__bio { font-size: var(--text-base); color: var(--ink-body); max-width: none; }
.founder__bio + .founder__bio { margin-top: var(--space-3); }