/* ---------------------------------------------------------------------------
   About. Runs on css/vestiaire.css like the case studies; only the portrait,
   the action buttons and the experience list are specific to this page.
--------------------------------------------------------------------------- */

/* The hero's emphasised clause takes the pink accent rather than the case
   study blue that vestiaire.css sets: About sits beside the index, not
   inside a case study, and the index hero uses the same device. Written with
   .vc-page in front so it wins on specificity, not on stylesheet order. */
.vc-page .vc-hero h1 em { color: var(--nav-accent); }

.ab-portrait { width: min(100%, 340px); }
.ab-portrait img { border: 1px solid var(--rule-soft); filter: grayscale(1) contrast(1.04); }

/* CV and LinkedIn, the same pair the index used to carry: two plain circles,
   the LinkedIn mark and the word CV. */
.ab-social { display: flex; gap: 10px; margin-top: 34px; }
.ab-social a { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid var(--rule); border-radius: 50%; color: var(--text); font-size: 14px; letter-spacing: .04em; text-decoration: none; transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease); }
.ab-social a:hover { border-color: var(--accent-line); background: var(--tint-2); color: var(--accent-strong); }

/* Experience. One row per place, the role and the years on the left and what
   the work was on the right. */
.ab-roles { margin: 50px 0 0; padding: 0; list-style: none; }
.ab-roles > li { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 14px 48px; padding: 30px 0; border-bottom: 1px solid var(--rule-soft); }
.ab-roles > li:first-child { border-top: 1px solid var(--rule); }
.ab-roles h3 { margin: 0 0 6px; color: var(--text); font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 500; letter-spacing: -.03em; }
.ab-roles b { display: block; color: var(--accent); font-size: 14px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.ab-roles p { max-width: 58ch; margin: 0 0 14px; color: var(--text-3); font-size: 16px; line-height: 1.7; }
.ab-roles p:last-child { margin-bottom: 0; }
.ab-roles ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ab-roles ul a { display: inline-block; padding: 7px 15px; border: 1px solid var(--rule); border-radius: 999px; color: var(--text-3); font-size: 14px; text-decoration: none; transition: color .2s var(--ease), border-color .2s var(--ease); }
.ab-roles ul a:hover { border-color: var(--accent-line); color: var(--accent-strong); }

@media (max-width: 800px) {
  .ab-roles > li { grid-template-columns: 1fr; gap: 16px; }
}