/* Over mij: kop links (desktop sticky), foto's met tekst rechts. Niets overlapt. */
.about { padding-block: calc(var(--section-gap) / 2); }
.about-head { display: grid; gap: 24px; align-content: start; }
.about-title {
  font-size: var(--step-xl); line-height: .85; font-weight: 300;
  color: var(--ink);
  padding-bottom: .1em; /* ruimte voor de descender van de j */
}
.about-name { font-size: var(--step-m); font-weight: 400; line-height: 1.3; letter-spacing: 0; color: var(--ink); }

.about-flow { display: flex; flex-direction: column; }
.about-photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface); }
.about-img {
  display: block; width: 100%; height: 112%; margin-top: -6%; object-fit: cover;
  filter: brightness(.85) contrast(1.05);
  transform: translate3d(0, var(--about-shift, 0px), 0);
  will-change: transform;
}
.about-text { font-size: var(--step-body); color: var(--ink); }
.about-text p + p { margin-top: 1em; }
.about-img--tobias { object-position: 50% 30%; }

/* Desktop: kolom 1-5 sticky kop op één regel, kolom 7-12 foto's met tekst, licht verspringend.
   De fotokolom is compact gehouden zodat de kop hooguit ±2 schermen blijft staan. */
@media (min-width: 1024px) {
  .about-layout {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }
  .about-head { grid-column: 1 / span 5; position: sticky; top: 120px; }
  .about-title { font-size: min(var(--step-xl), 148px); white-space: nowrap; }
  .about-flow { grid-column: 7 / span 6; gap: clamp(56px, 5vw, 80px); }
  .about-item { width: min(25vw, 360px); }
  .about-item--b { align-self: flex-end; }
  .about-text { max-width: 400px; margin-top: 20px; }
}

/* Tablet (600-1023): kop bovenaan, daarna foto en tekst naast elkaar, om en om gespiegeld */
@media (min-width: 600px) and (max-width: 1023px) {
  .about-head { margin-bottom: 64px; }
  .about-flow { gap: 72px; }
  .about-item {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    column-gap: 40px; align-items: end;
  }
  .about-item--b { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); }
  .about-item--b .about-photo { grid-column: 2; grid-row: 1; }
  .about-item--b .about-text { grid-column: 1; grid-row: 1; }
}

/* Telefoon (<600): kop bovenaan, foto's 72% breed om en om tegen de marges */
@media (max-width: 599px) {
  .about-head { gap: 16px; margin-bottom: 48px; }
  .about-flow { gap: 48px; }
  .about-item { width: 72%; }
  .about-item--b { align-self: flex-end; }
  .about-text { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-img { transform: none; will-change: auto; }
}