/* ============================================================
   About page — page-specific styles
   (story timeline + team cards; everything else reuses the
   shared inner-page template classes in css/style.css)
   ============================================================ */

/* ─── Our Story: timeline + narrative two-column layout ──────── */
.story-grid { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: start; }
@media (min-width: 900px) { .story-grid { grid-template-columns: 0.9fr 1.1fr; gap: 64px; } }

.story-timeline { position: relative; list-style: none; padding: 0; margin: 0; }
.story-timeline::before {
  content: '';
  position: absolute; left: 19px; top: 8px; bottom: 8px; width: 1px;
  background: rgba(255,255,255,0.1);
}
.story-timeline li { position: relative; display: flex; gap: 20px; padding-bottom: 40px; }
.story-timeline li:last-child { padding-bottom: 0; }
.story-timeline-year {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; z-index: 1; box-shadow: 0 6px 16px rgba(254,4,103,0.35);
}
.story-timeline-label { font-size: 0.875rem; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.story-timeline-text { font-size: 0.875rem; color: var(--muted); line-height: 1.6; }

.story-narrative p { color: var(--muted); font-size: 1rem; line-height: 1.75; margin-bottom: 20px; }
.story-narrative p:last-child { margin-bottom: 0; }

/* ─── Meet the Team ────────────────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(4,1fr); } }

.team-card {
  background: var(--card); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
  padding: 32px 24px; text-align: center; transition: border-color 0.3s ease;
}
.team-card:hover { border-color: rgba(254,4,103,0.35); }
.team-card .avatar { margin: 0 auto 20px; }
.avatar-xl { width: 80px; height: 80px; font-size: 1.5rem; box-shadow: 0 10px 20px -5px rgba(0,0,0,0.4); }
.team-name { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.team-role { font-size: 0.75rem; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
.team-bio { font-size: 0.8125rem; color: var(--muted); line-height: 1.6; }