/* About: page-specific layout only. Tokens from tokens.css. */
.about-hero { align-items: center; }
.about-hero__copy { display: grid; gap: var(--sp-3); }
.about-portrait { display: grid; justify-items: center; gap: var(--sp-2); color: var(--text-muted); }
.about-portrait__image { width: min(100%, 320px); aspect-ratio: 3 / 4; }
.about-portrait__initial { font-family: var(--font-display); font-size: 6rem; color: var(--cobalt); }
.shots__image { aspect-ratio: 4 / 5; }

/* Timeline: single column, track on the left */
.timeline { position: relative; }
.timeline__line {
  position: absolute;
  top: var(--sp-1);
  bottom: var(--sp-1);
  left: 7px;
  width: 2px;
}
.timeline__list { display: grid; gap: var(--sp-6); }
.timeline__item {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  padding-left: var(--sp-6);
}
.timeline__node {
  position: absolute;
  left: 0;
  top: var(--sp-0-5);
  width: 16px;
  height: 16px;
  border-radius: var(--r-pill);
  background: var(--cobalt);
  box-shadow: 0 0 0 4px var(--cobalt-a12);
}
.timeline__text { display: grid; gap: var(--sp-1); align-content: start; }
.timeline__visual { aspect-ratio: 4 / 3; display: grid; gap: var(--sp-1); color: var(--text-muted); width: 100%; max-width: 28rem; }

/* How I work: ruled numbered list */
.principles { display: grid; border-top: 1px solid var(--ink-a12); }
.principles__item {
  display: grid;
  grid-template-columns: var(--sp-6) 1fr;
  column-gap: var(--sp-2);
  row-gap: var(--sp-1);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--ink-a12);
}
.principles__num {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--cobalt);
}
.principles__item p { color: var(--text-muted); max-width: 52ch; }

.stats { display: grid; gap: var(--sp-2); grid-template-columns: repeat(2, 1fr); }
.stats__fig { font-family: var(--font-display); font-size: var(--fs-h2); }

/* Process shots: contained scroll row on mobile */
.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: var(--sp-2);
}
.shots__item { display: grid; gap: var(--sp-1); scroll-snap-align: start; align-content: start; }
.shots__item figcaption { display: grid; font-weight: 600; }
.shots__item figcaption .small { font-weight: 400; color: var(--text-muted); }

@media (min-width: 60em) {
  .about-hero__copy { grid-column: 1 / 8; }
  .about-portrait { grid-column: 9 / 13; }
  .about-portrait__image { width: 100%; }
  .timeline__list { gap: var(--sp-8); }
  .timeline__text { max-width: 60ch; }
  .timeline__item:has(.timeline__visual:not([hidden])) { grid-template-columns: 1fr 1fr; column-gap: var(--sp-8); align-items: center; }

  .principles { grid-template-columns: repeat(3, 1fr); border-top: 0; column-gap: var(--sp-6); }
  .principles__item { grid-template-columns: 1fr; border-top: 1px solid var(--ink-a12); border-bottom: 0; align-content: start; }
  .principles__num { grid-row: auto; margin-bottom: var(--sp-2); }

  .stats { grid-template-columns: repeat(4, 1fr); }
  .shots { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; }
}