/* ============================================
   ABOUT — John Naska profile
   ============================================ */
.about {
  background: var(--color-forest-deep);
  color: var(--color-white);
}

.about__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-16);
  align-items: center;
}

.about__media {
  position: relative;
}
.about__photo {
  width: 100%;
  border-radius: var(--radius-2xl);
  object-fit: cover;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-lg);
}
.about__media::after {
  content: '';
  position: absolute;
  inset: auto -14px -14px auto;
  width: 62%; height: 62%;
  border: 1.5px solid rgba(127, 211, 187, 0.35);
  border-radius: var(--radius-2xl);
  z-index: -1;
}

.about__name {
  font-size: clamp(2rem, 3.5vw, var(--text-4xl));
  margin-bottom: var(--space-5);
}

.about__quote {
  font-size: clamp(1.25rem, 2.2vw, var(--text-2xl));
  font-weight: var(--font-medium);
  font-style: italic;
  line-height: 1.4;
  color: #fff;
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-teal);
  margin-bottom: var(--space-8);
}

.about__text {
  color: var(--color-on-dark-70);
  font-size: var(--text-base);
  line-height: 1.7;
  margin-bottom: var(--space-5);
}
.about__text strong { color: #fff; font-weight: var(--font-semibold); }

.about__tagline {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: #7fd3bb;
  margin: var(--space-8) 0 var(--space-6);
}

.about__creds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.about__cred {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04);
}
.about__cred svg { width: 16px; height: 16px; color: #7fd3bb; }

@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .about__media { max-width: 420px; }
  .about__media::after { display: none; }
}