/* ==========================================================
   About page: intro + photo slideshow, career timeline, credentials,
   off-the-clock tiles, résumé, closing line.
   Tokens and existing text styles only.
   ========================================================== */
.about-section { padding-top: 0; }
.about-section .title-row { margin-bottom: var(--space-48); }
.about-section .title-row .heading-h2 { max-width: 900px; }

/* 1. intro text (left) + fading photo slideshow (right) */
.about-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-64); align-items: start; margin-top: var(--space-64); }
.about-intro__text { display: flex; flex-direction: column; gap: var(--space-24); max-width: 640px; }
.about-intro__text .body-large { color: var(--text-secondary); }
.about-slides { position: sticky; top: calc(var(--nav-h) + var(--space-32)); }
.about-slides__track { list-style: none; padding: 0; position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-badge); background: var(--background-surface); }
.about-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease-in-out); }
.about-slide.is-active { opacity: 1; }
.about-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7s linear; }
.about-slide.is-active img { transform: scale(1); }
.about-slide--contain img { object-fit: contain; padding: var(--space-32); transform: none !important; }
.about-slides__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); margin-top: var(--space-16); }
.about-slides__dots { display: flex; gap: var(--space-8); }
.about-slides__dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--brand-primary); transition: background-color .3s var(--ease-out), width .4s var(--ease-out); }
.about-slides__dot.is-active { width: 28px; border-radius: 999px; background: var(--brand-primary); }
.about-slides__pause { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border-strong); border-radius: 50%; }
.about-slides__pause span { width: 10px; height: 12px; border-inline: 3px solid var(--text-primary); }
.about-slides__pause.is-paused span { width: 0; height: 0; border-inline: 0; border-left: 10px solid var(--text-primary); border-block: 6px solid transparent; margin-left: 3px; }
@media (prefers-reduced-motion: reduce) { .about-slide, .about-slide img, .about-slides__dot { transition: none; } .about-slide img { transform: none; } }

/* 2. career timeline: newest on top, highlighted */
.timeline { list-style: none; padding: 0; position: relative; border-top: 1px solid var(--border-default); }
.tl { position: relative; display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-8) var(--space-32); align-items: baseline; padding: var(--space-24) var(--space-24) var(--space-24) var(--space-48); border-bottom: 1px solid var(--border-default); }
/* the vertical line and a dot per stop */
.tl::before { content: ""; position: absolute; left: 20px; top: 0; bottom: 0; width: 1px; background: var(--border-default); }
.tl::after { content: ""; position: absolute; left: 16px; top: calc(var(--space-24) + 8px); width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--background-page); }
.tl:first-child::before { top: calc(var(--space-24) + 8px); }
.tl:last-child::before { bottom: calc(100% - var(--space-24) - 8px); }
.tl__year { display: flex; align-items: center; gap: var(--space-8); font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.tl__role { font-size: 18px; font-weight: 500; line-height: 1.4; }
.tl__line { font-size: 16px; line-height: 1.5; color: var(--text-secondary); }
.tl__link { height: auto; margin-left: 4px; }
.tl--now { background: var(--background-surface); }
.tl--now::after { border-color: var(--brand-primary); background: var(--brand-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 20%, transparent); }
.tl--now .tl__year { color: var(--brand-primary); }
.tl--now .tl__role { color: var(--text-hero-emphasis); }
.tl__now { padding: 2px var(--space-8); border-radius: var(--radius-button); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-on-primary); background: var(--brand-primary); }
.about-footnote { max-width: 760px; margin-top: var(--space-24); }

/* 3. credentials: three groups of small cards */
.creds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-32); }
.creds__group { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.creds__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-12); }
.cred { display: flex; flex-direction: column; gap: 4px; padding: var(--space-24); border: 1px solid var(--border-default); border-radius: var(--radius-badge); background: var(--background-page); transition: border-color .3s var(--ease-out); }
.cred:hover { border-color: var(--border-strong); }
.cred .label-small { margin-top: var(--space-8); font-weight: 600; font-variant-numeric: tabular-nums; }

/* 4. off the clock: playful chips */
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-12); }
.chip { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-24) var(--space-12) var(--space-16); border: 1px solid var(--border-default); border-radius: var(--radius-button); background: var(--background-page); font-size: 18px; font-weight: 500; line-height: 1.3; transition: border-color .3s var(--ease-out), color .3s var(--ease-out), transform .45s var(--ease-out); }
.chip svg { flex: none; color: var(--brand-primary); transition: transform .45s var(--ease-out); }
.chip:hover { border-color: var(--brand-primary); color: var(--text-hero-emphasis); }
.chip:nth-child(odd):hover { transform: rotate(-2deg); }
.chip:nth-child(even):hover { transform: rotate(2deg); }
.chip:hover svg { transform: scale(1.15) rotate(-8deg); }
.offclock__line { max-width: 760px; margin-top: var(--space-32); }
.offclock__more { margin-top: var(--space-12); }
.offclock__more .text-link { height: auto; margin-right: 2px; }
@media (prefers-reduced-motion: reduce) { .chip, .chip svg { transition: none; } .chip:hover, .chip:hover svg { transform: none; } }

/* 5. résumé */
.resume__card { gap: var(--space-16); }
.resume__aside { margin-top: var(--space-8); font-style: italic; }
.resume__cta { justify-content: center; gap: var(--space-16); }
.resume__cta [hidden] { display: none; }

/* 6. closing line */
.about-close { padding-top: var(--space-48); }
.about-close__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-48); text-align: center; }
.about-close .display-hero { max-width: 1100px; text-wrap: balance; }
.about-close__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-16); }

@media (max-width: 1100px) {
  .creds { grid-template-columns: minmax(0, 1fr); gap: var(--space-48); }
  .creds__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .about-intro { grid-template-columns: minmax(0, 1fr); gap: var(--space-48); }
  .about-slides { position: static; }
  .tl { grid-template-columns: minmax(0, 1fr); padding-right: var(--space-16); }
  .about-section .cs-tiles--2 { grid-template-columns: minmax(0, 1fr); }
  .about-section .cs-tiles--2 > * { border-right: 0 !important; border-bottom: 1px solid var(--border-default) !important; }
  .about-section .cs-tiles--2 > :last-child { border-bottom: 0 !important; }
}
@media (max-width: 600px) {
  .creds__list { grid-template-columns: minmax(0, 1fr); }
}
.work-hero + .about-section { padding-top: var(--space-96); }
@media (max-width: 600px) { .work-hero + .about-section { padding-top: var(--space-64); } }
@media (max-width: 600px) { .chip { font-size: 16px; padding: 10px var(--space-16) 10px var(--space-12); } }

/* quick facts under the intro text: slim chips, same style as Off the clock */
.about-facts { margin-top: var(--space-8); gap: 6px; }
.about-facts .chip { gap: 6px; padding: 6px 10px 6px 8px; font-size: 14px; }
.about-facts .chip svg { width: 16px; height: 16px; }
.about-facts .chip:hover { transform: none; }
.nowrap { white-space: nowrap; }
.about-close { overflow-x: clip; } /* keep the decorative orbit from widening the page on phones */