/* ═══════════════════════════════════════════════
   FOUNDER.CSS — Section 7: Meet the Founder
   Edit: photo column width, credential badge styles
   To add a real photo: replace .founder-photo-placeholder
   with <img class="founder-photo" src="..."> and remove
   the placeholder background gradient
═══════════════════════════════════════════════ */

#founder {
  background: var(--cream);
  padding: var(--section-v) var(--section-h);
  position: relative;
}

.founder-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 80px;
  align-items: start;
  max-width: var(--max-w);
  margin: 0 auto;
}

/* ── Photo column ── */
.founder-img-wrap { position: relative; }

.founder-photo-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: linear-gradient(145deg, var(--parchment) 0%, var(--gold-light) 100%);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.founder-photo-placeholder::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.2) 0%, transparent 60%);
}

/* Real photo class — use instead of placeholder */
.founder-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius);
  display: block;
}

/* Offset gold border frame */
.founder-img-accent {
  position: absolute;
  top: -14px; left: -14px;
  right: 14px; bottom: 14px;
  border: 1.5px solid var(--gold);
  border-radius: var(--radius);
  z-index: -1;
  opacity: .6;
}

/* Small tag floating bottom-right */
.founder-img-tag {
  position: absolute;
  bottom: -18px; right: -18px;
  background: var(--brown-deep);
  padding: 18px 22px;
  border: 1px solid rgba(201,164,107,.2);
}
.founder-img-tag p {
  font-family: var(--f-display);
  font-size: .82rem;
  font-style: italic;
  color: var(--gold-light);
  line-height: 1.45;
}

/* ── Text column ── */
.founder-text { padding-top: 12px; }

.founder-name {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  color: var(--brown-deep);
  line-height: 1.1;
  margin-bottom: 28px;
}
.founder-name em { font-style: italic; color: var(--brown-mid); }

.founder-bio p {
  font-family: var(--f-elegant);
  font-size: 1.08rem;
  color: var(--text-muted);
  line-height: 1.9;
  margin-bottom: 18px;
}

/* Credential pills */
.founder-credentials {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.founder-cred {
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-light);
  padding: 8px 14px;
  border: 1px solid var(--parchment);
  border-radius: var(--radius);
  transition: border-color .22s, color .22s;
}
.founder-cred:hover { border-color: var(--gold); color: var(--gold-deep); }

/* Italic signature */
.founder-sig {
  font-family: var(--f-display);
  font-size: 1.75rem;
  font-style: italic;
  color: var(--brown-soft);
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--parchment);
}

/* ── Responsive ─────────────────────────── */
@media (max-width: 1024px) {
  .founder-grid { grid-template-columns: 300px 1fr; gap: 56px; }
}
@media (max-width: 768px) {
  .founder-grid         { grid-template-columns: 1fr; gap: 56px; }
  .founder-img-wrap     { max-width: 320px; }
  .founder-img-tag      { bottom: -14px; right: -10px; }
}
@media (max-width: 480px) {
  .founder-img-wrap     { max-width: 260px; }
}