/* -------------------------------------------------------- */
/* 🔹 About Page                                            */
/* -------------------------------------------------------- */
/* What the app is for, its history on a timeline and the   */
/* same question then and now                                */

.about__intro {
  font-size: var(--text-title-large);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.about__heading {
  margin-block: var(--website-section-spacing) var(--space-xxl);
  font-size: var(--text-headline-large);
  font-weight: 700;
}


/* -------------------------------------------------------- */
/* 🔹 Timeline                                              */
/* -------------------------------------------------------- */
/* A vertical rule with a dot per year, the dot centered on  */
/* the rule                                                  */

.about__timeline {
  list-style: none;
  border-left: 2px solid var(--color-outline);
}

.about__entry {
  position: relative;
  padding-left: var(--space-xxl);
  padding-bottom: var(--space-xxxl);
}

.about__entry:last-child {
  padding-bottom: 0;
}

.about__entry::before {
  content: '';
  position: absolute;
  top: 6px;
  left: -8px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  box-shadow: 0 0 0 6px var(--color-scaffold-bg);
}

.about__year {
  font-size: var(--text-body-medium);
  font-weight: 700;
  color: var(--color-secondary);
}

.about__entry-title {
  margin-top: var(--space-xs);
  font-size: var(--text-headline-medium);
  font-weight: 700;
}

.about__entry-text {
  margin-top: var(--space-xs);
  line-height: 1.6;
  color: var(--color-text-secondary);
}


/* -------------------------------------------------------- */
/* 🔹 Then and now                                          */
/* -------------------------------------------------------- */
/* Two whole phones side by side at the same height, so the */
/* captions line up                                          */

/* A heading with a lead-in sits closer to its text */
.about__heading:has(+ .about__text) {
  margin-bottom: var(--space-s);
}

.about__text {
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.about__compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-l);
  margin-top: var(--space-xl);
}

.about__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xl) var(--space-lxl);
  border-radius: var(--radius);
  background-color: var(--color-card-fill);
}

.about__figure img {
  height: 440px;
  width: auto;
}

.about__caption {
  margin-top: var(--space-l);
  font-size: var(--text-body-medium);
  color: var(--color-text-secondary);
  text-align: center;
}

.about__caption-year {
  display: block;
  font-size: var(--text-body-large);
  font-weight: 700;
  color: var(--color-on-surface);
}