/* about.css — styles for /about/index.html
   Builds on variables and utilities in /css/main.css */

:root{
  --about-avatar-size: 112px;
  --about-gap: 1rem;
}

/* Hero layout */
.about-hero{ padding:1.5rem 0 0.75rem; }
.hero-inner{
  display:flex;
  gap:1.25rem;
  align-items:flex-start;
  margin-top:0.75rem;
}

/* Avatar */
.avatar-wrap{
  width:var(--about-avatar-size);
  flex: 0 0 var(--about-avatar-size);
  display:flex;
  align-items:center;
  justify-content:center;
}
.avatar{
  width:var(--about-avatar-size);
  height:var(--about-avatar-size);
  border-radius:999px;
  display:block;
  object-fit:cover;
  border:3px solid rgba(175,28,46,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Bio column */
.hero-bio{ flex:1 1 auto; min-width:0; }
.lead{ font-size:1.05rem; margin:0 0 0.5rem; color:var(--text); font-weight:600; }

/* CTA row */
.cta-row{ margin-top:0.6rem; display:flex; gap:.6rem; align-items:center; }

/* Contact */
.contact-list{ list-style:none; padding:0; margin:0.6rem 0 1rem; display:flex; flex-direction:column; gap:.5rem; }
.contact-list li{ font-size:1rem; color:var(--text); display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.contact-list a{ color:var(--brand); text-decoration:none; }
.contact-list a:hover{ text-decoration:underline; }

/* small button */
.btn.small{ padding:.25rem .45rem; font-size:.9rem; border-radius:6px; }

/* more section */
.more ul{ margin:0.4rem 0 1rem 1.1rem; color:var(--muted) }

/* Responsive adjustments */
@media (max-width:820px){
  .hero-inner{ flex-direction:column; align-items:center; text-align:left; }
  .avatar-wrap{ margin-bottom:.6rem; }
  .hero-bio{ width:100%; }
  .cta-row{ justify-content:center }
  .contact-list li{ justify-content:center }
}