/* About page (hakkimizda/): built like the tribute page — plain text, no boxes. A centred intro on top,
   then the two founders side by side split by a thin vertical line, then a direct contact line. */

.about-page { padding-top: var(--page-top); }
.about-intro { max-width: 720px; margin: 0 auto; text-align: center; }
.about-intro .eyebrow { justify-content: center; margin-bottom: 12px; color: var(--color-muted); }
.about-intro h1 { margin: 0; font-size: var(--text-h2); line-height: var(--leading-heading); }
.about-intro h1 em { font-style: normal; color: var(--heading-em); }
.about-intro p { margin-top: 18px; font-size: var(--text-400); line-height: var(--leading-body); color: var(--color-ink); }

.about-founders { display: grid; grid-template-columns: 1fr 1fr; max-width: 940px; margin: 56px auto 0; padding: 0; list-style: none; }
.about-founder { display: flex; flex-direction: column; align-items: center; padding: 0 44px; text-align: center; }
.about-founder + .about-founder { border-left: 1px solid var(--color-line); }
.about-photo { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; filter: drop-shadow(0 8px 16px var(--toon-shadow)); }
.about-founder h2 { margin-top: 20px; font-size: var(--text-h3); line-height: var(--leading-heading); }
.about-role { margin-top: 4px; font-size: var(--text-250); font-weight: var(--weight-semibold); color: var(--color-accent); }
.about-bio { flex-grow: 1; margin-top: 16px; font-size: var(--text-350); line-height: var(--leading-body); color: var(--color-muted); }
.about-linkedin { --icon-size: 26px; display: grid; place-items: center; width: 44px; height: 44px; margin-top: 12px; color: var(--color-accent); }

.about-contact { max-width: 640px; margin: 56px auto 0; padding-top: 28px; border-top: 1px solid var(--color-line); font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-muted); text-align: center; }
.about-contact a { font-weight: var(--weight-bold); color: var(--color-accent); }

.about-linkedin:hover { color: var(--color-ink); }
.about-contact a:hover { text-decoration: underline; }

@media (max-width: 1000px) {
  .about-page { padding-bottom: var(--section-space); }
  .about-founder { padding: 0 28px; }
}

@media (max-width: 700px) {
  .about-intro p { font-size: var(--text-body); }
  .about-founders { grid-template-columns: 1fr; margin-top: 36px; }
  .about-founder { padding: 0; }
  .about-founder + .about-founder { margin-top: 32px; padding-top: 32px; border-left: 0; border-top: 1px solid var(--color-line); }
  .about-photo { width: 120px; height: 120px; }
  .about-contact { margin-top: 40px; font-size: var(--text-300); }
}