/* About page (/me/). The prose and CV link come from the editable page content;
   about-page.js arranges them (lead paragraph, logo carousel, contact details) and
   adds the timeline from page-me.php. Without JS the content still reads top to
   bottom with these styles. Prefixed ab- so nothing collides with portfolio.css. */

body.is-about-page {
  --ab-ink: #19191a;
  --ab-muted: rgba(25, 25, 26, .62);
  --ab-line: rgba(25, 25, 26, .13);
  --ab-paper: #f8f7f0;
  --ab-ease: cubic-bezier(.2, .7, .1, 1);
  --ab-wrap: min(760px, calc(100vw - 2 * var(--ab-gutter))); /* one centred column for the whole page */
  --ab-gutter: clamp(20px, 5vw, 72px);
  --ab-section: clamp(64px, 8vw, 104px); /* the one gap between every section, hero to contact */
  --ab-inner: clamp(28px, 3vw, 36px);   /* heading to its content, and text to a timeline or carousel */
  color: var(--ab-ink);
  background: var(--ab-paper);
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ab { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html:has(body.is-about-page) { scroll-behavior: smooth; } }
.ab a { color: inherit; }

/* ---------- Hero ---------- */
.ab-hero {
  width: var(--ab-wrap); margin: 0 auto;
  padding: clamp(110px, 14vw, 170px) 0 var(--ab-section);
}
.ab-hero__mark { position: relative; padding: .05em .06em 0; margin-left: -.06em; font-size: clamp(8.5rem, 27vw, 20rem); }
.ab-hero__title {
  margin: 0; font: 600 1em/.82 "Poppins", sans-serif; letter-spacing: -.075em; color: var(--ab-ink);
  white-space: nowrap;
}
.ab-hero__mark.has-dither .ab-hero__title { color: transparent; }
.ab-hero__mark .dither-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ab-hero__aside { margin-top: clamp(24px, 3vw, 36px); }
.ab-hero__lede {
  margin: 0;
  font: 500 clamp(1.2rem, 2.1vw, 1.85rem)/1.32 "Poppins", sans-serif; letter-spacing: -.025em; text-wrap: pretty;
}
.ab-contact-btn {
  display: inline-flex; align-items: center; gap: .6em; margin-top: 26px; padding: 14px 24px; border-radius: 999px;
  border: 1px solid var(--ab-ink); background: var(--ab-ink); color: var(--ab-paper) !important; text-decoration: none;
  font: 500 .95rem/1 "Poppins", sans-serif;
  transition: background .2s, color .2s;
}
.ab-contact-btn:hover { background: transparent; color: var(--ab-ink) !important; }
.ab-contact-btn span { display: inline-block; transition: transform .3s var(--ab-ease); }
.ab-contact-btn:hover span { transform: translateY(3px); }


/* ---------- Body ---------- */
.ab-body { width: var(--ab-wrap); margin: 0 auto; }

.ab-contact { display: flex; flex-direction: column; gap: 10px; font-style: normal; }
.ab-contact a {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center;
  width: max-content; max-width: 100%; font-size: .9rem; color: var(--ab-muted); text-decoration: none;
  transition: color .2s;
}
.ab-contact a:hover { color: var(--ab-ink); }
.ab-contact .material-symbols-rounded { font-size: 20px; color: var(--ab-ink); font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24; }
.ab-cv, .ab-content .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: 14px 22px; border-radius: 999px; border: 1px solid var(--ab-ink);
  background: var(--ab-ink); color: var(--ab-paper) !important; text-decoration: none;
  font: 500 .92rem/1 "Poppins", sans-serif;
  transition: transform .3s var(--ab-ease), background .2s, color .2s;
}
.ab-cv:hover, .ab-content .wp-block-button__link:hover { background: transparent; color: var(--ab-ink) !important; }
.ab-cv span[aria-hidden] { transition: transform .3s var(--ab-ease); }
.ab-cv:hover span[aria-hidden] { transform: translateY(2px); }

/* ---------- Content ---------- */
.ab-content { min-width: 0; }
.ab-content h2 {
  margin: var(--ab-section) 0 var(--ab-inner); scroll-margin-top: 110px;
  font: 600 clamp(2.2rem, 4.6vw, 3.8rem)/1 "Poppins", sans-serif; letter-spacing: -.055em; text-wrap: balance;
}
.ab-content > h2:first-child { margin-top: 0; }
.ab-content p, .ab-content li { font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.7; color: var(--ab-muted); }
.ab-content p { margin: 0 0 1.2em; }
.ab-content > :is(p, ul, figure, div):has(+ h2), .ab-content > :last-child:not(.ab-path) { margin-bottom: 0; }
.ab-content p.ab-lead {
  margin-bottom: 1.1em;
  font: 500 clamp(1.3rem, 2.1vw, 1.75rem)/1.38 "Poppins", sans-serif; letter-spacing: -.025em; color: var(--ab-ink);
}
.ab-content h3 { margin: 42px 0 16px; font: 500 .78rem/1.2 "Poppins", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--ab-muted); }
.ab-content figure { margin: 0 0 40px; }
.ab-content figure img { display: block; width: 100%; height: auto; }
.ab-content .wp-block-buttons { margin-top: 40px; }

/* Career path: a line that fills as you scroll past it */
.ab-path { --p: 0; position: relative; list-style: none; margin: var(--ab-inner) 0 -18px; padding: 0 0 0 34px; } /* -18px: the last row's own padding counts towards the gap */
.ab-path::before, .ab-path::after { content: ""; position: absolute; left: 6px; top: 26px; bottom: 26px; width: 2px; border-radius: 2px; }
.ab-path::before { background: var(--ab-line); }
.ab-path::after { background: var(--ab-ink); transform-origin: top; transform: scaleY(var(--p)); }
.ab-path__step {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 14px;
  padding: 18px 12px; border-radius: 8px;
  transition: background .25s;
}
.ab-path__step::before { /* dot on the line */
  content: ""; position: absolute; left: -34px; top: 50%; width: 14px; height: 14px; margin-top: -7px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid var(--ab-ink); background: var(--ab-paper);
  transition: background .3s var(--ab-ease), transform .3s var(--ab-ease);
}
.ab-path__step.is-passed::before { background: var(--ab-ink); }
.ab-path__step:hover { background: rgba(25, 25, 26, .04); }
.ab-path__step:hover::before { transform: scale(1.25); }
.ab-path__company { font: 600 clamp(1.1rem, 1.7vw, 1.4rem)/1.2 "Poppins", sans-serif; letter-spacing: -.03em; color: var(--ab-ink); transition: transform .35s var(--ab-ease); }
.ab-path__step:hover .ab-path__company { transform: translateX(6px); }
.ab-path__company small { margin-left: .35em; font-size: .62em; font-weight: 400; letter-spacing: 0; color: var(--ab-muted); }
.ab-path__role { font-size: .9rem; color: var(--ab-muted); text-align: right; white-space: nowrap; }
.ab-path__role em {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 4px 10px; border-radius: 999px;
  background: #007a22; color: #fff; font: 500 .72rem/1 "Poppins", sans-serif; font-style: normal; letter-spacing: .06em; text-transform: uppercase;
}
.ab-path__role em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #9dffb5; animation: ab-pulse 1.8s ease-in-out infinite; }
@keyframes ab-pulse { 50% { opacity: .25; } }

/* Brands: a slow carousel of the logos in colour, fading out at both ends (about-page.js) */
.ab-logo-carousel {
  --logo-size: clamp(28px, 4vw, 40px); /* roughly the height of a square-ish logo */
  margin-top: var(--ab-inner);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.ab-logo-belt { display: flex; width: max-content; animation: ab-logos 100s linear infinite; }
.ab-logo-carousel:hover .ab-logo-belt { animation-play-state: paused; }
.ab-logo-track { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.ab-logo-track li { flex: none; margin-right: clamp(40px, 6vw, 72px); } /* the gap lives on each item so both halves are equal */
.ab-logo-track img { display: block; height: auto; max-height: calc(var(--logo-size) * 1.5); }
@keyframes ab-logos { to { transform: translateX(-50%); } }
.ab .sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; list-style: none;
}

/* ---------- Closing ---------- */
.ab-end {
  width: var(--ab-wrap); margin: 0 auto; padding: var(--ab-section) 0 clamp(70px, 9vw, 120px);
}
.ab-end__title { margin: 0 0 var(--ab-inner); font: 600 clamp(2.2rem, 4.6vw, 3.8rem)/1 "Poppins", sans-serif; letter-spacing: -.055em; } /* same as the section headings */
.ab-end__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.ab-end__actions .ab-contact { flex-direction: row; flex-wrap: wrap; gap: 14px 26px; }
.ab-end__actions .ab-contact a { font-size: clamp(1rem, 1.6vw, 1.3rem); color: var(--ab-ink); }
.ab-end__actions .ab-contact a span:last-child { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ab-ease); }
.ab-end__actions .ab-contact a:hover span:last-child { background-size: 100% 1px; }

/* ---------- Motion (only when about-page.js has run and motion is welcome) ---------- */
.ab-motion .ab-hero__lede, .ab-motion .ab-contact-btn { opacity: 0; transform: translateY(18px); animation: ab-up .9s var(--ab-ease) forwards; }
.ab-motion .ab-hero__lede { animation-delay: .35s; }
.ab-motion .ab-contact-btn { animation-delay: .5s; }
@keyframes ab-up { to { opacity: 1; transform: none; } }
.ab-motion .ab-reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ab-ease), transform .9s var(--ab-ease); transition-delay: var(--d, 0s); }
.ab-motion .ab-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Smaller screens ---------- */
@media (max-width: 600px) {
  .ab-path__step { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ab-path__role { text-align: left; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-path__role em::before { animation: none; }
  .ab-logo-belt { animation: none; width: auto; }
  .ab-logo-track { flex-wrap: wrap; row-gap: 28px; }
  .ab-logo-track[aria-hidden] { display: none; }
  .ab-logo-carousel { -webkit-mask-image: none; mask-image: none; }
}