/* ==========================================================================
   ABOUT PAGE — Hero · In short · Timeline · Toolkit & education
   ========================================================================== */

.about-hero { position: relative; overflow: hidden; background: var(--surface-hero); border-bottom: 1px solid var(--line-cool); }
.about-hero-inner {
  position: relative; padding-top: clamp(48px, 7vw, 88px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(32px, 5vw, 56px); align-items: end;
}
.about-hero-text { display: flex; flex-direction: column; gap: 18px; padding-bottom: clamp(40px, 6vw, 80px); }
.about-hero-text h1 { font-weight: 800; font-size: clamp(40px, 6.4vw, 88px); line-height: 0.96; letter-spacing: -0.035em; }
.about-lead { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.35; color: var(--ink-700); max-width: 26em; }
/* The portrait bleeds off the bottom edge on purpose — never frame it */
.about-hero-portrait { display: flex; justify-content: center; }
.about-hero-portrait img {
  width: 100%; max-width: 352px; height: auto; margin-bottom: -1px;
  filter: drop-shadow(0 26px 60px rgba(42, 11, 87, 0.22));
}

/* ---------- Timeline ---------- */
.timeline { list-style: none; padding: 0; border-bottom: 1px solid var(--line-warm); }
.timeline-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px clamp(20px, 4vw, 48px); border-top: 1px solid var(--line-warm); padding-block: 26px;
}
.timeline-years { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--accent); }
.timeline-body { grid-column: span 2; display: flex; flex-direction: column; gap: 8px; }
.timeline-body p { font-size: var(--size-body-sm); line-height: 1.62; color: var(--ink-600); }

/* ---------- Toolkit & education ---------- */
.toolkit {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 56px); align-items: start;
}
.toolkit > div { display: flex; flex-direction: column; gap: 18px; }
.education { display: flex; flex-direction: column; gap: 12px; }
.edu-card { padding: 22px 24px; gap: 6px; }
.edu-title { font-size: 17px; font-weight: 500; color: var(--ink-900); }
.edu-card .dash-list { margin-top: 8px; }
.well--life { height: clamp(200px, 26vw, 320px); }