/* === ABOUT PAGE === */

/* Override stories.css flex body — use block layout so margin collapsing
   works the same as landing pages (nav + hero spacing collapses to 40px) */
body.about-page {
  display: block;
}

/* Reset line-height inflated by stories.css so header/nav match other pages */
body.about-page header.site-header,
body.about-page .navbar {
  line-height: 1.6;
}

/* About hero — position image to show face */
#about-hero {
  background-position: center 40%;
}

/* Top padding on story container */
body.about-page .story-container {
  padding-top: 3rem;
}

/* Pull quote */
.about-pull-quote {
  max-width: 640px;
  margin: 3rem auto;
  padding: 2rem 1.5rem;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-text-primary);
  line-height: 1.55;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  quotes: none;
}

/* Drop cap only on the first paragraph */
body.about-page .story-content .story-block p + p::first-letter {
  float: none;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding-right: 0;
  font-family: inherit;
  color: inherit;
  text-transform: none;
}

/* Section cards wrapper */
.about-section-cards {
  padding: 3rem 0 2rem;
  border-top: 2px solid var(--color-brand-red);
  margin-top: 1rem;
}

/* Homepage "Read my story" link */
.about-read-more {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-brand-red);
  text-decoration: none;
  transition: color var(--transition-default);
}

.about-read-more:hover {
  color: var(--color-brand-red-hover);
}

/* Mobile */
@media (max-width: 600px) {
  .about-pull-quote {
    font-size: 1.2rem;
    padding: 1.5rem 1rem;
  }
}