/* ==========================================================================
   About page
     1. Intro
     2. Timelines (education, experience, research, awards)
     3. Skills
   ========================================================================== */

/* small caps labels in the case study voice: orange, tracked out */
.label,
.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.muted {
  color: var(--text);
}
.page-end {
  height: clamp(64px, 10vh, 120px);
}

/* 1. Intro ----------------------------------------------------------------- */
.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.67fr) minmax(0, 1fr);
  gap: clamp(40px, 8vw, 115px);
  align-items: start;
  padding-top: clamp(56px, 10vh, 112px);
  padding-bottom: 86px;
}
/* the ID badge (styles in site.css) hangs in the left column */
.about-intro .badge {
  justify-self: center;
  margin-top: -48px;
}
.about-intro__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.statement {
  max-width: 474px;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.fill-word {
  background: linear-gradient(90deg, var(--ink) var(--f, 0%), color-mix(in srgb, var(--ink) 55%, transparent) var(--f, 0%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about-intro__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
}
.about-intro__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 57px;
  margin-top: 24px;
}
.about-intro__stats b {
  display: block;
  font-family: var(--heading-font);
  font-size: 2.5rem;
  color: var(--accent-text);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}
.about-intro__stats span {
  display: block;
  margin-top: 8px;
  color: var(--text);
}
@media (max-width: 860px) {
  .about-intro {
    grid-template-columns: minmax(0, 1fr);
  }
  .about-intro .badge {
    margin-top: 0;
  }
}
@media (max-width: 640px) {
  .about-intro__stats {
    gap: 16px;
  }
  .about-intro__stats b {
    font-size: 2.5rem;
  }
}

/* 2. Timelines ------------------------------------------------------------- */
/* Section headers as on the case studies: an orange eyebrow over an
   Antonio title, left-aligned on the same 1080px column as the content,
   with no tinted band. */
.timeline-section,
.chapters {
  padding-block: clamp(56px, 9vh, 104px) 0;
}
.block--center {
  gap: 8px;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-top: 0;
}
.block--center .block__title {
  font-size: var(--fs-stage);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.block--center .block__body {
  --indent: 0px;
  margin-top: 0;
  padding: 24px 0 0;
  border-image: none;
}

.timeline-wrap {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
}

/* Each entry is a row: year, a rail column with the dot and the line, the body */
.timeline {
  display: flex;
  flex-direction: column;
}
.timeline > li {
  display: grid;
  grid-template-columns: minmax(0, 0.64fr) 28px minmax(0, 1fr);
}

/* the rail: a 1px line down the middle, and the dot drawn on top of it */
.timeline__dot {
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-self: stretch;
  padding-top: 7px;
  background: linear-gradient(var(--line), var(--line)) center 19px / 1px 100% no-repeat;
}
.timeline > li:last-child .timeline__dot {
  background: none;
}
.timeline__dot::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text);
}

.timeline__body {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 0 0 36px 20px;
}
.timeline__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 20px;
  width: 100%;
}
.timeline__top b {
  font-family: var(--heading-font);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--surface);
  font-family: var(--heading-font);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.timeline__org {
  line-height: 1.5;
}

.timeline__body .dot-list li {
  font-size: 1rem;
}

/* Research and awards: a heading on the left, a list without years */
.timeline-group {
  display: grid;
  grid-template-columns: minmax(0, 0.64fr) 28px minmax(0, 1fr);
  align-items: start;
}
.timeline-group__title {
  font-size: 1.5rem;
  line-height: 1.2;
}
.timeline-group .timeline {
  grid-column: 2 / 4;
}
.timeline-group .timeline > li {
  grid-template-columns: 28px minmax(0, 1fr);
}
.timeline-group .timeline__dot {
  grid-column: 1;
}
.timeline-group .timeline__body {
  grid-column: 2;
}

@media (max-width: 860px) {
  .timeline > li {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .timeline__dot {
    grid-column: 1;
    grid-row: 1 / 3;
  }
  .timeline__body {
    grid-column: 2;
    grid-row: 2;
  }
  .timeline-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .timeline-group .timeline {
    grid-column: 1;
  }
  .timeline-group .timeline__body {
    grid-row: auto;
  }
  .timeline-group .timeline__dot {
    grid-row: auto;
  }
}

/* 3. Skills ---------------------------------------------------------------- */
.timeline-wrap.skills {
  max-width: none;
}
.skills details {
  border-top: 1px solid var(--line);
}
.skills details:last-child {
  border-bottom: 1px solid var(--line);
}
.skills summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 23px 0;
  cursor: pointer;
  list-style: none;
}
.skills summary::-webkit-details-marker {
  display: none;
}
.skills summary::after {
  content: "+";
  font-size: 1.375rem;
  color: var(--accent-text);
}
.skills details[open] summary::after {
  content: "×";
}
.skills h3 {
  font-size: 1.5rem;
}
.skills ul {
  padding-bottom: 16px;
}
.skills li {
  padding: 9px 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}
.skills {
  gap: 0;
  max-width: 860px;
}

/* Education and experience as story chapters ----------------------------------
   One chapter per place, oldest first. Each is two columns: a stack of
   pictures on one side and the story on the other; the sides alternate. The
   top of every stack is the chapter card (number and place on the grid-line
   band used for the case-study stage breaks), then the chapter's photos.

   A chapter with photos pins in place while you scroll through it (both
   columns are sticky and the chapter is made taller, 45vh per photo), and the
   cards flip away one by one to reveal the next. That is pure CSS: each
   chapter is a view timeline, and each card's "fly away" animation runs over
   its own slice of the chapter's progress (card --i of --flips). The last
   photo stays. On phones, for reduced motion, or in browsers without
   scroll-driven animations, the stack is a swipeable row instead. Grid and
   flex only. */
.chapters .block__body {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 9vw, 120px);
}
.chapters__lead {
  margin-bottom: calc(clamp(64px, 9vw, 120px) * -0.5);
  color: var(--text);
}
.chapter {
  --pin: calc(var(--bar-h) + 32px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  view-timeline-name: --chapter;
}
/* every other chapter swaps sides; the columns swap too, so the picture is
   always the narrower (5fr) column and every chapter's picture is the same size */
.chapter:nth-of-type(even) {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.chapter:nth-of-type(even) .chapter__media {
  order: 2;
}
.chapter__media {
  position: sticky;
  top: var(--pin);
}
.chapter__stack {
  display: grid;
  padding: 12px;
}
.chapter__card {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: calc(100vh - var(--pin) - 56px);
  border-radius: var(--r-xl);
  box-shadow: 0 18px 36px -14px rgb(0 0 0 / 0.5);
  z-index: calc(20 - var(--i, 0));
}
/* the cards underneath peek out, each turned a little */
.chapter__card:nth-child(2) { rotate: 3deg; }
.chapter__card:nth-child(3) { rotate: -2.5deg; }
.chapter__card:nth-child(4) { rotate: 4deg; }
.chapter__card:nth-child(5) { rotate: -3.5deg; }
.chapter__photo {
  object-fit: cover;
  background: var(--surface-2);
}
.chapter__panel {
  --grid-line: color-mix(in srgb, var(--accent) 22%, transparent);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 2.5vw, 32px);
  background:
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--stage);
}
.chapter__num {
  font-family: var(--heading-font);
  font-size: clamp(4rem, 2rem + 6vw, 8rem);
  font-weight: 600;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent-text);
}
.chapter__panel-place {
  font-family: var(--heading-font);
  font-size: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}

/* pinned chapters that flip through their photos */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .chapter--stack {
      min-height: calc(100vh + var(--flips) * 45vh);
    }
    .chapter--stack .chapter__text {
      position: sticky;
      top: var(--pin);
    }
    .chapter--stack .chapter__card:not(:last-child) {
      animation: card-away 1ms ease-in both;
      animation-timeline: --chapter;
      animation-range:
        contain calc(var(--i) / var(--flips) * 90%)
        contain calc((var(--i) + 0.85) / var(--flips) * 90%);
    }
  }
}
@keyframes card-away {
  to {
    translate: 10% -120%;
    rotate: -14deg;
    opacity: 0;
  }
}

/* phones, reduced motion, older browsers: a swipeable row of cards */
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .chapter__stack {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 0 12px;
  }
  .chapter__card {
    flex: 0 0 82%;
    rotate: none !important;
    aspect-ratio: 4 / 3.4;
    scroll-snap-align: start;
  }
  .chapter__stack:has(> :only-child) .chapter__card {
    flex-basis: 100%;
  }
}
@supports not (animation-timeline: view()) {
  .chapter__stack {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .chapter__card {
    flex: 0 0 82%;
    rotate: none !important;
    scroll-snap-align: start;
  }
}

.chapter__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.chapter__kicker {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.chapter__place {
  font-size: var(--fs-h2);
  line-height: 1.05;
}
.chapter__intro {
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--ink);
}
.chapter__entries {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}
.chapter__entry {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.chapter__role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.chapter__role b {
  font-weight: 600;
  color: var(--ink);
}
.chapter__org,
.chapter__desc {
  color: var(--text);
}
@media (max-width: 860px) {
  .chapter,
  .chapter:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr);
  }
  .chapter:nth-of-type(even) .chapter__media {
    order: 0;
  }
  .chapter__media {
    position: static;
  }
}

/* Chapters as slides (about.js adds .chapters--slides) -----------------------
   The four chapters share one stage and show one at a time; the chosen one
   fades in and the others are hidden. Each slide is two columns: on the left a panel in
   the chapter's own soft colour with the big chapter number and count at
   the top, the story at the bottom and the place as a huge outlined ghost
   word along the bottom edge; on the right the chapter's photos (or its
   chapter card until photos are added). Above the stage: the places to
   jump to any chapter, and previous / next. Nothing moves on its own. Grid only. */
.chapters--slides .slides {
  display: grid;
}
.chapters--slides .slides:focus {
  outline: none;
}
.chapters--slides .chapter,
.chapters--slides .chapter:nth-of-type(even),
.chapters--slides .chapter--stack {
  grid-area: 1 / 1;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: stretch;
  gap: 0;
  height: auto;
  min-height: clamp(460px, 64vh, 600px);
  overflow: hidden;
  border-radius: var(--r-xl);
  view-timeline-name: none;
}
/* only the chosen chapter takes up space; it fades in when shown */
.chapters--slides .chapter:not(.is-active) {
  display: none;
}
.chapters--slides .chapter.is-active {
  animation: slide-in 0.45s ease;
}
@keyframes slide-in {
  from {
    opacity: 0;
  }
}
/* each chapter's colour */
.chapters--slides .chapter:nth-of-type(1) { --tint: color-mix(in oklch, #f2a07b 32%, var(--bg)); }
.chapters--slides .chapter:nth-of-type(2) { --tint: color-mix(in oklch, #7fb2e5 32%, var(--bg)); }
.chapters--slides .chapter:nth-of-type(3) { --tint: color-mix(in oklch, #9ccb8f 32%, var(--bg)); }
.chapters--slides .chapter:nth-of-type(4) { --tint: color-mix(in oklch, #c0a6e0 32%, var(--bg)); }

/* the panel */
.chapters--slides .chapter__text {
  order: 1;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  min-width: 0;
  padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px) 0;
  overflow: hidden;
  background: var(--tint);
}
.chapters--slides .chapter__count {
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}
.chapters--slides .chapter__count b {
  font-family: var(--heading-font);
  font-size: clamp(3.25rem, 2.2rem + 3vw, 5.5rem);
  font-weight: 700;
  line-height: 0.85;
  color: var(--ink);
}
.chapters--slides .chapter__count span {
  padding-top: 6px;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text);
}
.chapters--slides .chapter__body {
  grid-row: 3;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px;
}
/* chapters with three or more entries list them two to a row on wide
   screens, so every slide stays a sensible height */
@media (min-width: 1001px) {
  .chapters--slides .chapter__entries:has(> li:nth-child(3)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 28px;
    align-items: start;
  }
  .chapters--slides .chapter__entries:has(> li:nth-child(3)) > li {
    margin: 0;
  }
  /* an entry with a description takes the full width */
  .chapters--slides .chapter__entries:has(> li:nth-child(3)) > li:has(.chapter__desc) {
    grid-column: 1 / -1;
  }
}
/* the place as a ghost word, cut off by the bottom edge */
.chapters--slides .chapter__text::after {
  content: attr(data-ghost) / "";
  grid-row: 4;
  display: block;
  margin: -0.15em 0 -0.22em;
  overflow: hidden;
  font-family: var(--heading-font);
  font-size: clamp(4rem, 2.6rem + 4.5vw, 7.5rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--ink);
  opacity: 0.22;
  pointer-events: none;
  user-select: none;
}
@supports not (-webkit-text-stroke: 1px black) {
  .chapters--slides .chapter__text::after {
    color: var(--ink);
    opacity: 0.08;
  }
}

/* the photos: one fills the side; with more, the first is large and the
   rest share a column beside it. The flip-away stack is not used here. */
.chapters--slides .chapter__media,
.chapters--slides .chapter:nth-of-type(even) .chapter__media {
  order: 2;
  position: static;
  display: grid;
  min-width: 0;
  /* the photos never set the slide's height: the side simply fills the
     height the panel gives it */
  contain: size;
}
.chapters--slides .chapter .chapter__stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: 6px;
  height: 100%;
  padding: 0;
}
.chapters--slides .chapter .chapter__stack:has(.chapter__photo ~ .chapter__photo) {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.chapters--slides .chapter .chapter__stack:has(.chapter__photo ~ .chapter__photo) .chapter__photo:first-of-type {
  grid-row: span 3;
}
.chapters--slides .chapter .chapter__card {
  grid-area: auto;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  rotate: none;
  translate: none;
  transform: none;
  opacity: 1;
  animation: none;
}
.chapters--slides .chapter .chapter__stack:has(.chapter__photo) .chapter__panel {
  display: none;
}

/* the places and previous / next under the stage */
.slides__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 16px;
}
.slides__places {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.slides__place {
  display: inline-flex;
  align-items: center; /* baseline would pin the text to the top of the pill */
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: none;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.slides__place-num {
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}
.slides__place:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.slides__place[aria-current="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}
.slides__place[aria-current="true"] .slides__place-num {
  color: inherit;
}
.slides__steps {
  display: flex;
  gap: 8px;
}
.slides__step {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.slides__step svg {
  width: 20px;
  height: 20px;
}
.slides__step:hover {
  background: var(--ink);
  color: var(--bg);
}
:is(.slides__place, .slides__step):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

@media (max-width: 860px) {
  .chapters--slides .chapter,
  .chapters--slides .chapter:nth-of-type(even),
  .chapters--slides .chapter--stack {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .chapters--slides .chapter__media,
  .chapters--slides .chapter:nth-of-type(even) .chapter__media {
    min-height: 260px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chapters--slides .chapter.is-active {
    animation: none;
  }
}