/* =========================================================
   ABOUT PAGE
   ========================================================= */

/* ── Inverted color theme ────────────────────────────────── */

body.page-about {
  --color-bg:      #f0ede8;
  --color-surface: #e5e2dd;
  --color-border:  #d0ccc6;
  --color-text:    #111110;
  --color-text-2:  rgba(17, 17, 16, 0.6);
  --color-muted:   #7a776f;
}

body.page-about .footer__copy-btn {
  color: var(--color-text);
  border-color: rgba(0, 0, 0, 0.15);
}

body.page-about .footer__copy-btn:hover,
.btn--cv:hover {
  color: var(--color-text);
  border-color: transparent;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.30) 100%
    ) padding-box,
    linear-gradient(
      160deg,
      rgba(0, 0, 0, 0.12) 0%,
      rgba(0, 0, 0, 0.04) 40%,
      rgba(0, 0, 0, 0) 70%,
      rgba(0, 0, 0, 0.06) 100%
    ) border-box;
  backdrop-filter: blur(24px) saturate(200%) brightness(105%);
  -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(105%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    inset 0 -0.5px 0.5px rgba(0, 0, 0, 0.05),
    0 4px 12px -2px rgba(0, 0, 0, 0.10),
    0 12px 36px -8px rgba(0, 0, 0, 0.12),
    0 24px 60px -14px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

body.page-about .nav__blur::before {
  background: rgba(240, 237, 232, 0.45);
}

/* ── About title / hero ──────────────────────────────────── */

.about__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-text);
  margin-bottom: var(--space-xl);
  padding-top: var(--space-2xl);
}

.about__title .char {
  will-change: opacity, transform, filter;
}

/* ── About body ──────────────────────────────────────────── */

.about__body {
  position: relative;
  z-index: 1;
}


/* ── Two-column grid ─────────────────────────────────────── */

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  margin-bottom: var(--space-2xl);
}

.about__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* ── Photo ───────────────────────────────────────────────── */

.about__photo {
  position: relative;
}

.about__photo-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 64px;
  object-fit: cover;
}

/* ── Bio ─────────────────────────────────────────────────── */

.about__bio {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.about__bio-lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.4;
}

.about__bio p {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-text-2);
  font-weight: 400;
  line-height: 1.7;
}

.about__bio p strong {
  color: var(--color-text);
  font-weight: 600;
}

.about__bio p.about__bio-lead {
  color: var(--color-text);
}

/* ── Responsive: stack on mobile ─────────────────────────── */

@media (max-width: 768px) {
  .about__grid {
    grid-template-columns: 1fr;
  }

  .about__photo {
    order: -1;
  }
}

/* ── CV Button ───────────────────────────────────────────── */

.about__cv {
  margin-bottom: 0;
}


/* btn--cv — identical to footer__copy-btn */
.btn--cv {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 100px;
  color: var(--color-text);
  background: transparent;
  cursor: pointer;
  transition:
    color        var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    background   var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-base) var(--ease-out),
    backdrop-filter var(--dur-base) var(--ease-out),
    transform    var(--dur-base) var(--ease-out);
}

/* hover is shared with footer__copy-btn above */

.btn--cv .arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}

.btn--cv:hover .arrow {
  transform: translateY(2px);
}

/* ── Contact teaser ──────────────────────────────────────── */

.about__contact-teaser {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-text-2);
  margin-bottom: var(--space-xl);
  line-height: 1.6;
}