/* ABOUT PAGE — only styles unique to this template.
   Reuses tokens (_tokens.css), global.css, and layout.css. */

/* Small helpers */
.eyebrow{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate) }

/* ===== About hero ===== */
header.about-hero{
  padding: clamp(var(--s7), 8vw, var(--s8)) 0 var(--s6);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #f0f7f4, #d4e9df);
}
.about-hero .hero-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(var(--s5), 4vw, var(--s7));
  align-items: start;
}
#aboutName { grid-column: 1; }
#aboutDesc { grid-column: 1; }
#aboutPic { grid-column: 2; grid-row: 1 / span 2; }

.about-hero .hero-text{ align-self: start }
.about-hero .portrait-wrap{
  position: relative;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.about-hero .portrait{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
 @media (max-width:980px){
  .about-hero .hero-grid{ grid-template-columns: 1fr; gap: 24px; }
  #aboutName { grid-column: 1; grid-row: 1; }
  #aboutPic { grid-column: 1; grid-row: 2; }
  #aboutDesc { grid-column: 1; grid-row: 3; }
  .about-hero .portrait-wrap{ height: auto !important }
  .about-hero .portrait{ aspect-ratio: 4 / 5 }
}

/* ===== Timeline — keep your card look; draw rail via SVG for perfect alignment */
.timeline{
  --spine-x: 40;    /* px, from timeline’s left edge */
  --conn:    18;    /* px, connector length into card */
  --dot:     12;    /* px, dot diameter */
  position: relative;
  padding-left: calc(var(--spine-x) * 1px + var(--conn) * 1px + 22px);
  margin: 6px 0;
}
.timeline .timeline-canvas{
  position:absolute; inset:0; pointer-events:none; overflow:visible;
  display:block; width:100%; height:100%;
}

.t-item{
  position:relative;
  margin:0 0 12px;
  padding:12px 14px;
  border:1px solid var(--line);
  background:var(--bg-elev);
  border-radius:12px;
  box-shadow: var(--shadow-1);
}
.t-item:last-child{ margin-bottom:0 }

/* remove old pseudo dots/connectors (if any were cached) */
.t-item::before,
.t-item::after{ content:none !important }

/* Typography trimmed */
.t-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 2px }
.t-when{ font-weight:800; color:var(--slate); font-size:12.5px; margin:0 }
.t-role{ margin:2px 0 4px; font-family:var(--font-head); font-size:18px; line-height:1.25 }
.t-meta{ color:var(--muted); font-size:13px; margin:0 0 4px }
.t-item ul.small{ margin:6px 0 2px; padding-left:18px }
.t-item ul.small li{ margin:2px 0 }
.t-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:6px }
.t-tags .pill{ padding:3px 8px; font-size:11.5px }

/* Logo (optional) */
.t-logo{
  width:28px; height:28px; border-radius:6px; object-fit:contain; background:#fff;
  border:1px solid var(--line); padding:3px; flex:0 0 auto;
}

/* Hover lift */
 @media (hover:hover){
  .t-item{ transition: box-shadow .15s ease, transform .15s ease }
  .t-item:hover{ box-shadow: var(--shadow-2); transform: translateY(-1px) }
}

/* ===== Skills (pips) ===== */
.skills{ display:grid; gap:12px }
.skill{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--bg-elev)
}
.skill .name{ font-weight:600 }
.pips{ display:inline-flex; gap:6px }
.pip{ width:10px; height:10px; border-radius:50%; border:1.5px solid var(--line); background:transparent }
.pip.filled{ background:var(--green); border-color:transparent }

/* ===== About footer ===== */
.nps-about-footer{ padding:32px 0 }
.nps-about-footer-inner{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:16px
}

/* ===== BACKGROUND / EDUCATION ===== */
#background .grid-2 {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
}

 @media (max-width: 980px) {
  #background .grid-2 {
    grid-template-columns: 1fr;
  }
}