/* About page — same hub chrome as main landings + narrative body */
@import './hubs.css';
@import './site-chrome.css';
@import './surface-warm.css';
@import './worlds-interiors.css';

body.about-page {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  color: var(--ej-ink);
}

.about-hero {
  padding: clamp(2rem, 6vw, 3.5rem) 0 1rem;
}

.about-hero h1 {
  margin-bottom: 0.5rem;
}

.about-story {
  padding: 2rem 0 3rem;
}

.about-story p {
  max-width: 62ch;
  color: var(--ej-muted);
  margin: 0 0 1.15rem;
}

.about-people {
  padding: 3rem 0 4rem;
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 800px) {
  .about-people {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.about-person {
  padding: 1.75rem;
  border-radius: var(--ej-radius);
  border: 1px solid var(--ej-line);
  background: color-mix(in srgb, white 65%, var(--ej-paper));
  box-shadow: var(--ej-shadow);
}

.about-person h2 {
  font-family: var(--ej-serif);
  font-size: 1.35rem;
  margin: 0 0 0.75rem;
}

.about-person .ph {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 10px;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #ddd, #bbb);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #666;
  text-align: center;
  padding: 1rem;
}

.about-person--evan .ph {
  background: linear-gradient(145deg, #3d6b8c, #1e3a4a);
  color: rgba(255, 255, 255, 0.85);
}

.about-person--jade .ph {
  background: linear-gradient(145deg, #c45c6a, #6b2d3a);
  color: rgba(255, 255, 255, 0.85);
}

.about-person--kids .ph {
  background: linear-gradient(120deg, #d4a84b, #a67c2a);
  color: rgba(30, 30, 30, 0.85);
}

.about-person p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ej-muted);
}