.about {
  position: relative;
  overflow: hidden;
  background: var(--color-text-light);
  padding-block: clamp(70px, 8vw, 130px);
}

/* Soft background circles, matching the simplified Figma reference - a
   light callback to the Hero's own circles, not a repeat of the full
   doodle set.

   Constrained to a centered, 1280px-max box (not the full, unbounded
   .about width) and pinned to z-index: 0, same reasoning as the Hero's
   own .hero__doodles: the Figma reference is a fixed 1280px frame, and
   .about__inner (below) is a plain static, non-positioned child, so
   without an explicit z-index this positioned layer would otherwise
   paint on top of it and cover the text. */
.about__scatter {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: var(--container-width);
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  display: none;
}

.about__blob {
  position: absolute;
  border-radius: 50%;
  aspect-ratio: 1;
}

/* Positions/sizes lifted from the Figma reference (percentages of the
   1280x829 "about" frame), recolored to our own existing palette tints. */
.about__blob--a { left: 5.9%; top: 22.1%; width: clamp(110px, 20.31%, 260px); background: #e8eef5; }
.about__blob--b { left: 64.30%; top: 10.13%; width: clamp(140px, 26.56%, 340px); background: #e8f3f2; }
.about__blob--c { left: 41.95%; top: 63.93%; width: clamp(90px, 16.02%, 205px); background: #f5eaef; }

@media (min-width: 1240px) {
  .about__scatter {
    display: block;
  }
}

.about__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: 20px;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.8vw, 36px);
}

/* Echoes the four project accent colors (same order they appear in the
   case studies above) right as the page enters About, so the palette
   the reader just saw doesn't just vanish. */
.about__palette {
  display: flex;
  gap: 10px;
}

.about__palette-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.about__palette-dot--teal { background: #3e9b96; }
.about__palette-dot--blue { background: #3e6fa8; }
.about__palette-dot--olive { background: #5e693d; }
.about__palette-dot--mauve { background: #a8527a; }

.about__body {
  display: flex;
  flex-direction: column;
}

.about__row {
  display: flex;
  align-items: flex-end;
  gap: clamp(38px, 4.6vw, 60px);
}

.about__column {
  display: flex;
  flex-direction: column;
  gap: clamp(50px, 6vw, 76px);
  flex: 1 0 0;
  min-width: 0;
}

.about__contact {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.3vw, 42px);
}

.about__resume-link {
  align-self: flex-start;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.3vw, 42px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 20px;
}

.contact-item__icon {
  width: 40px;
  height: 40px;
  display: block;
  flex-shrink: 0;
}

.contact-item__icon--wrapped {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-accent-tint);
  border-radius: 20px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.contact-item__icon--wrapped img {
  width: 16px;
  height: 16px;
  display: block;
}

.contact-item__link {
  text-decoration: underline;
  transition: color 0.25s ease;
}

.contact-item__link:hover,
.contact-item__link:focus-visible {
  color: var(--color-accent);
}

/* Phone number: a real tel: link (taps to call on mobile), but left
   looking like plain text - no underline - matching the design. */
.contact-item__tel {
  text-decoration: none;
  transition: color 0.25s ease;
}

.contact-item__tel:hover,
.contact-item__tel:focus-visible {
  color: var(--color-accent);
}

/* Email: click to copy instead of a link - it isn't one. */
.contact-item__copy {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease;
}

.contact-item__copy:hover,
.contact-item__copy:focus-visible {
  color: var(--color-accent);
}

.contact-item__copy.is-copied {
  color: var(--color-accent);
}

.about__illustration {
  width: 320px;
  height: auto;
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .about__row {
    flex-direction: column;
    align-items: center;
    gap: clamp(28px, 6vw, 45px);
  }

  .about__column {
    width: 100%;
  }

  .about__illustration {
    width: min(260px, 70%);
  }
}