/* ==========================================================================
   About page — styles nothing else uses.
   ========================================================================== */

/* CV head: "CV" headline with the download button on the right */
@media (min-width:1024px){
  .section > .cv__head{
    grid-column:2 / 13;
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
  }
  .cv__head .section__num{top:16px;}
  .section > .cv__summary{grid-column:2 / 11;}
  .section > .section__body--entries{grid-column:2 / 13;}
}
.cv__head .btn{align-self:stretch;}
@media (min-width:1024px){.cv__head .btn{align-self:auto;}}

/* mentorship and education */
.cv__item{
  display:flex;
  flex-direction:column;
  gap:4px;
  border-top:1px solid var(--fg);
  padding:12px 0;
}
.cv__item-title{font-size:var(--fs-h3);font-weight:700;}

/* experience chart: one 28px row per job on a 2008–2026 track.
   Each bar sets --from and --to in years since 2008. Desktop only;
   the experience list below carries the same dates. */
.timeline{display:none;}
@media (min-width:1024px){
  .timeline{display:flex;flex-direction:column;}
  .timeline__row{
    display:grid;
    grid-template-columns:150px minmax(0,1fr);
    align-items:center;
    height:28px;
    border-bottom:1px solid var(--rule);
  }
  .timeline__axis{
    height:auto;
    padding-bottom:6px;
    border-bottom-color:var(--fg);
    font-size:var(--fs-label);
    font-weight:700;
    color:var(--soft);
  }
  /* 9 two-year ticks across 18 years */
  .timeline__ticks{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));}
  .timeline__name{font-size:var(--fs-label);font-weight:700;}
  .timeline__track{position:relative;height:100%;}
  .timeline__bar{
    position:absolute;
    top:9px;
    bottom:9px;
    left:calc(var(--from) / 18 * 100%);
    width:max(calc((var(--to) - var(--from)) / 18 * 100%), 4px);
    background:var(--bar);
  }
  .timeline__bar--print{--bar:var(--c-red);}
  .timeline__bar--sw{--bar:var(--c-ink);}
  .timeline__bar--ai{--bar:var(--c-blue);}
  .timeline__legend{display:flex;gap:24px;margin-top:12px;font-size:var(--fs-label);color:var(--soft);}
  .timeline__key{display:flex;align-items:center;gap:8px;}
  .timeline__key::before{content:"";width:16px;height:8px;background:var(--bar);}
}