/* ==========================================================================
   FIT BY SCIENCE - SECTION 07: FOUNDER
   Intimate, not a résumé. The portrait is deliberately contained (not
   full-bleed like the hero) - a considered photograph, not a dominant
   visual statement - so the copy, set as a flowing personal letter,
   carries the section. No credential list, no badges, no icons.
   ========================================================================== */

.founder {
  background: var(--obsidian);
  color: var(--bone);
  padding-block: var(--space-16);
}

@media (min-width: 1024px) {
  .founder { padding-block: var(--space-24); }
}

.founder__portrait {
  position: relative;
  width: min(420px, 84%);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(244, 242, 237, 0.14);
  background: linear-gradient(150deg, #1d2024 0%, #131518 55%, #0B0D0F 100%);
}

.founder__portrait::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.founder__portrait::after {
  content: '';
  position: absolute;
  inset: -10%;
  background: linear-gradient(200deg, transparent 46%, rgba(244, 242, 237, 0.05) 47%, transparent 48%);
}

.founder__caption {
  margin-top: var(--space-2);
  width: min(420px, 84%);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(167, 168, 165, 0.55);
}

.founder__content {
  margin-top: var(--space-12);
}

.founder__headline {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.1;
  font-size: var(--text-display-sm);
  color: var(--bone);
  max-width: 20ch;
}

/* ---- The letter ---- */
.founder__letter {
  margin-top: var(--space-8);
  max-width: 56ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.founder__letter p {
  font-size: var(--text-body-lg);
  line-height: 1.75;
  color: var(--stone);
}

.founder__letter .is-emphasis {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.3;
  color: var(--bone);
  padding-block: var(--space-1);
}

.founder__signature {
  margin-top: var(--space-8);
}

.founder__signature-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--bone);
}

.founder__signature-title {
  margin-top: 0.125rem;
  font-size: var(--text-body-sm);
  color: rgba(167, 168, 165, 0.7);
}

/* ==========================================================================
   Desktop - portrait anchored left, letter flows longer alongside it
   ========================================================================== */
@media (min-width: 1024px) {
  .founder__inner {
    display: grid;
    grid-template-columns: minmax(340px, 1.2fr) minmax(0, 1.15fr);
    gap: var(--space-8);
    align-items: start;
  }

  .founder__portrait,
  .founder__caption {
    width: 100%;
  }

  .founder__content {
    margin-top: 0;
  }
}