.about-hero {
  background: var(--ink);
  color: var(--white);
  padding: var(--space-24) var(--space-8);
  padding-top: calc(var(--space-24) + var(--nav-height));
  text-align: center;
}

.about-hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
.about-hero h1 em { font-style: normal; color: var(--red); }

.story-narrative {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-width: 56rem;
  margin: 0 auto;
  padding: var(--space-24) var(--space-8);
}

.story-narrative__block p { font-size: 1.15rem; color: var(--gray); }

.mascot-showcase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-8) var(--space-24);
  flex-wrap: wrap;
}

.mascot-showcase img { width: 14rem; }

.mascot-showcase p { max-width: 24rem; color: var(--gray); }

@media (max-width: 768px) {
  .mascot-showcase { flex-direction: column; text-align: center; }
}