/* ============================================================
   About Me — "Real Intro" section
   Step 9 — Figma ref: Page 1, node 172:4578 (heading), 172:4536 (copy),
   172:4531 (polaroid + SUMO), 172:4537 (GAME tag), 172:4581 (squiggle)
   ============================================================ */

#about {
  padding: var(--space-3xl);
  padding-top: var(--space-2xl);
  /* .about-skyline is intentionally wider than its container and
     bleeds past .about-visual's right edge (no clipping there, to
     match main) - this catches that bleed at the section level so it
     doesn't widen the whole page and cause horizontal scroll. */
  overflow-x: hidden;
}

.about-body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xl);
  max-width: 1312px;
  margin: 0 auto;
}

/* ── Left column: heading + copy ── */
.about-left {
  position: relative;
  flex: 0 0 563px;
  max-width: 563px;
}

.about-left h2 {
  margin-bottom: 91px; /* Figma gap between heading block (172:4578, h=96) and copy (172:4536, y=187) */
}

.about-left .subline {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-subline);
  letter-spacing: var(--tracking-subline);
  line-height: var(--leading-tight);
  font-weight: 400;
}

.about-text p {
  font-size: var(--text-body);
  letter-spacing: var(--tracking-body);
}

.about-left-dot {
  position: absolute;
}

.about-left-dot--1 { left: 166px; top: 148px; }
.about-left-dot--2 { left: 416px; top: 350px; }

/* ── Right column: photo + stickers ── */
.about-visual {
  position: relative;
  flex: 1 1 auto;
  min-width: 400px;
  height: 495px;
}

.polaroid-photo {
  position: absolute;
  left: 57px;
  top: 43px;
  width: 313px;
  height: 414px;
  object-fit: contain;
  transform: rotate(4.71deg);
}

/* Behind the photo: bottom edge tucked under the GAME ON tag rather than
   trailing off in open space (Figma ref: Website page, "Desktop - 23",
   node 130:2943, positioned relative to the polaroid, node 128:2895).
   Asset is cropped tight to its visible content (no more transparent
   padding) - a large negative top here previously pushed the element's
   box high enough to overlap the "A few more" project cards above. */
.about-skyline {
  position: absolute;
  left: 235px;
  top: 118px;
  width: 1121px;
  max-width: none;
}

.about-squiggle {
  position: absolute;
  left: -8px;
  top: 240px;
  width: 72px;
  height: auto;
  transform: rotate(105.69deg);
}

.about-game-tag {
  position: absolute;
  left: 355px;
  top: 319px;
  width: 117px;
  height: auto;
  transform: rotate(-13.53deg);
}

.about-visual-dot {
  position: absolute;
}

.about-visual-dot--1 { left: 593px; top: 105px; }
.about-visual-dot--2 { left: 426px; top: 199px; }
.about-visual-dot--3 { left: 676px; top: 158px; }
.about-visual-dot--4 { left: 676px; top: 431px; }

/* ── Mobile ── */
@media (max-width: 900px) {
  #about {
    padding: var(--space-lg);
  }

  .about-body {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
  }

  .about-left {
    flex: none;
    max-width: 100%;
    width: 100%;
  }

  .about-left-dot,
  .about-visual-dot,
  .about-squiggle,
  .about-skyline {
    display: none;
  }

  .about-visual {
    width: 100%;
    max-width: 346px;
    height: auto;
    min-width: 0;
  }

  .polaroid-photo {
    position: static;
    width: 100%;
    max-width: 346px;
    height: auto;
    transform: none;
  }

  .about-game-tag {
    position: absolute;
    left: auto;
    right: -12px;
    top: auto;
    bottom: -20px;
    width: 100px;
    transform: none;
  }
}