/* ============================================================
   about.css — About Page  v2 (light theme base, dark overlay)
   ============================================================ */

body.page-about { overflow: hidden; height: 100vh; }

.about-page {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--color-bg);
}

/* ─── BACKGROUND IMAGE ───────────────────────────────────── */
.about-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.about-bg__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Dark overlay — same Studio Dado logic as hero */
.about-bg__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 8, 0.74);
}

/* ─── CONTENT (white text over dark overlay) ─────────────── */
.about-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.72fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
  width: 100%;
  max-width: 1320px;
  padding: 0 clamp(4rem, 8vw, 8rem);
  padding-top: var(--nav-h);
}

/* About portrait/title composition — index project-title style */
.about-portrait-composition {
  position: relative;
  min-height: min(72vh, 700px);
  overflow: visible;
  display: block;
}

.about-portrait-image {
  position: absolute;
  right: 0;
  bottom: clamp(1.6rem, 3vh, 2.6rem);
  width: min(27vw, 390px);
  height: min(52vh, 560px);
  overflow: hidden;
  z-index: 1;
  background: rgba(240, 237, 232, 0.08);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24);
}

.about-portrait-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: grayscale(1) contrast(1.04);
}

.about-portrait-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: min(27vw, 390px);
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 300;
  line-height: var(--leading-relaxed);
  color: var(--hero-text);
  opacity: 0.7;
  text-align: right;
  pointer-events: none;
}

.about-statement.pc-name.about-title-index-style {
  position: absolute;
  left: clamp(-5.25rem, -5vw, -3.125rem);
  top: auto;
  bottom: clamp(2.2rem, 7vh, 4.8rem);
  z-index: 50;
  pointer-events: none;
  margin: 0;
  padding: 0;
  max-width: none;
  overflow: visible;

  color: var(--hero-text);
  font-family: var(--font-body);
  font-size: clamp(1.85rem, 3.05vw, 3.55rem);
  line-height: 0.99;
  font-weight: 400;
  letter-spacing: normal;
  opacity: 1;
  visibility: visible;
}

.about-statement.pc-name.about-title-index-style .pc-name__line {
  display: block;
  overflow: visible;
  padding: 0;
  margin: 0;
}

.about-statement.pc-name.about-title-index-style .pc-name__line-inner {
  display: block;
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  will-change: transform;
}

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

.about-bio {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 300;
  line-height: var(--leading-relaxed);
  color: var(--hero-text);
  opacity: 0.7;
  max-width: 42ch;
}

.about-rule { width: 40px; height: 1px; background: var(--color-accent); }

.about-facts { display: flex; flex-direction: column; gap: var(--space-xs); }

.about-fact__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  
  text-transform: uppercase;
  color: var(--hero-text-muted);
  margin-bottom: 0.2rem;
  display: block;
}
.about-fact__value {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  color: var(--hero-text);
  display: block;
}

/* Social */
.about-social { display: flex; gap: var(--space-md); margin-top: var(--space-sm); }
.about-social__link {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  
  text-transform: uppercase;
  color: var(--hero-text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: color var(--dur-fast) ease;
}
.about-social__link:hover { color: var(--color-accent); }
.about-social__link::after { content: '↗'; font-size: 0.6rem; }

/* Explore prompt */
.about-explore {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--hero-text-muted);
  transition: color var(--dur-normal) ease;
  cursor: auto;
  white-space: nowrap;
}
.about-explore:hover { color: var(--hero-text); }
.about-explore__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  
  text-transform: uppercase;
}
.about-explore__icon {
  width: 1px; height: 34px;
  background: currentColor;
  position: relative;
}
.about-explore__icon::after {
  content: '';
  position: absolute;
  bottom: 0; left: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}


@media (max-width: 1023px) {
  .about-portrait-composition {
    min-height: min(60vh, 560px);
  }
  .about-portrait-image {
    width: min(34vw, 340px);
    height: min(46vh, 500px);
  }
  .about-portrait-caption { width: min(34vw, 340px); }
  .about-statement.pc-name.about-title-index-style { font-size: clamp(1.6rem, 2.9vw, 2.95rem); left: clamp(-3.75rem, -4vw, -2.25rem); top: auto; bottom: clamp(2rem, 6vh, 4rem); }
}

@media (max-width: 767px) {
  .about-portrait-composition {
    min-height: auto;
    display: grid;
    gap: var(--space-md);
    padding-top: var(--space-lg);
  }
  .about-portrait-image {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(72vw, 340px);
    height: min(52vh, 460px);
    justify-self: end;
  }
  .about-portrait-caption {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(72vw, 340px);
    justify-self: end;
    margin: calc(-1 * var(--space-sm)) 0 0;
  }
  .about-statement.pc-name.about-title-index-style {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    transform: none;
    max-width: none;
    z-index: 2;
    font-size: clamp(2.2rem, 11vw, 3.4rem);
  }
}

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1023px) {
  .about-content { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.78fr); gap: var(--space-lg); padding: 0 var(--space-md); padding-top: var(--nav-h); }
}

@media (max-width: 767px) {
  body.page-about { overflow: auto; height: auto; }
  .about-page { position: static; min-height: 100svh; align-items: flex-start; }
  .about-content {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding: calc(var(--nav-h) + var(--space-md)) var(--space-sm) var(--space-xl);
    align-items: start;
  }
  .about-statement.pc-name.about-title-index-style { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .about-explore { display: none; }
}

/* V13.9 — keep native arrow cursor on text and all hover targets */
*, *::before, *::after,
a, button, input, textarea, select, label,
p, span, h1, h2, h3, h4, h5, h6,
[role="button"], [data-cursor], .project-link, .nav-link, .contact-direct__link {
  cursor: default !important;
}

/* V19.7 — About video background */
.about-bg--video {
  background: #0a0908;
  overflow: hidden;
}

.about-bg__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.58) saturate(0.82) contrast(1.04);
}


/* V20.5 Typography */
h1, h2, h3, .hero-title, .project-title {
  font-family: 'Cal Sans', sans-serif;
}

body, p, span, a, .menu, .small-text {
  font-family: 'Quicksand', sans-serif;
  font-weight: 300;
}

/* V5.8 — mobile safety: hide decorative About headline instead of letting it collide with portrait/details */
@media (max-width: 767px) {
  .about-statement.pc-name.about-title-index-style {
    display: none !important;
  }

  .about-content {
    gap: var(--space-md);
  }
}