.about{
  background: var(--color-white);
}
.about-layout{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.about-media{
  position: relative;
}
.about-media-frame{
  position: relative;
  overflow: hidden;
  border-radius: 30px;
}
.about-media-frame img{
  width: 100%;
  /* 1/1, not the previous 3/4 — the new portrait (about-gaia.png) is a
     3:2 landscape source; a 3:4 crop only showed the center 50% of its
     width and cut her left hand off the frame entirely. 1/1 shows ~67%
     of the source width, enough to keep both hands in frame. */
  aspect-ratio: 1/1;
  object-fit: cover;
}
.about-media .dim-line.top{ top: -18px; right: 0; left: 0; }
.about-media .dim-line.side{ top: 0; bottom: 0; left: -18px; }

.about-copy{
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
/* The accent line is a ::before on .eyebrow (see css/02-base.css). About
   uses the site's standard .reveal/.is-visible fade-up (js/main.js
   initReveal — the same reliable mechanism every other section uses, after
   two rounds of a bespoke GSAP entrance both misbehaving) — this line
   simply draws in a beat after the rest of .about-copy fades up, keyed off
   that same .is-visible class rather than anything custom. */
.about-copy .eyebrow::before{
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out) 0.3s;
}
.js .about-copy.is-visible .eyebrow::before{
  transform: scaleX(1);
}
.about-copy p{
  color: var(--color-dark);
  font-size: var(--fs-body-lg);
  max-width: 52ch;
}
.about-copy p strong{
  font-family: var(--font-display);
  font-weight: 800;
}

@media (max-width: 900px){
  .about-layout{ grid-template-columns: 1fr; }
  /* Mobile order is אודות/headline/text, THEN the image (spec'd order) —
     .about-media comes first in the DOM (desktop's RTL column placement),
     so it needs an explicit order override here rather than relying on
     source order once the grid collapses to one column. */
  .about-copy{ order: 1; }
  .about-media{ order: 2; max-width: 380px; margin-inline: auto; }
}