/**
 * About page.
 */

.rr-about-hero {
  padding: var(--rr-header-clearance, 10rem) 0 5rem;
}

@media (max-width: 1023px) {
  .rr-about-hero {
    padding-top: var(--rr-header-clearance-mobile, 7rem);
  }
}
  background: var(--color-ink);
}

.rr-about-hero__heading {
  margin: 0.75rem 0 0;
  max-width: 18ch;
  color: var(--color-paper);
}

.rr-about-hero__desc {
  margin: 1.25rem 0 0;
  max-width: 40rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-paper) 75%, transparent);
}

.rr-about-hero__intro {
  margin: 2.5rem 0 0;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--color-paper) 70%, transparent);
}

.rr-about-hero__est {
  margin-top: 2rem;
  color: var(--color-fog-dim, #6b7066);
}

.rr-about-stats {
  padding: 4rem 0;
  border-top: 1px solid color-mix(in srgb, var(--color-paper) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-paper) 10%, transparent);
  background: var(--color-ink-soft, #121412);
}

.rr-about-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .rr-about-stats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.rr-about-stats__value {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
}

.rr-about-stats__label {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--color-paper) 60%, transparent);
}

.rr-about-values {
  padding: 6rem 0;
  background: var(--color-ink);
}

.rr-about-values__heading {
  margin: 0.75rem 0 0;
  color: var(--color-paper);
}

.rr-about-values__grid {
  display: grid;
  gap: 3rem 2.5rem;
  margin-top: 3.5rem;
}

@media (min-width: 640px) {
  .rr-about-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .rr-about-values__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rr-about-value {
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--color-paper) 10%, transparent);
}

.rr-about-value__step {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.75rem;
  color: var(--color-lime);
}

.rr-about-value__title {
  margin: 0.75rem 0 0;
  font-size: 1.5rem;
  color: var(--color-paper);
}

.rr-about-value__desc {
  margin: 0.75rem 0 0;
  max-width: 20rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-paper) 70%, transparent);
}

.rr-about-values__closer {
  margin: 5rem 0 0;
  max-width: 28ch;
  color: var(--color-paper);
}

.rr-about-journey {
  padding: 6rem 0;
  border-top: 1px solid color-mix(in srgb, var(--color-paper) 10%, transparent);
  background: var(--color-ink-soft, #121412);
}

.rr-about-journey__heading {
  margin: 0.75rem 0 0;
  color: var(--color-paper);
}

.rr-about-timeline {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
}

.rr-about-timeline__row {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 2rem 0;
  border-top: 1px solid color-mix(in srgb, var(--color-paper) 10%, transparent);
}

@media (min-width: 640px) {
  .rr-about-timeline__row {
    grid-template-columns: 8rem 1fr;
    gap: 2.5rem;
  }
}

.rr-about-timeline__year {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  line-height: 1;
  color: color-mix(in srgb, var(--color-paper) 30%, transparent);
}

.rr-about-timeline__title {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  color: var(--color-paper);
}

.rr-about-timeline__desc {
  margin: 0.5rem 0 0;
  max-width: 32rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-paper) 70%, transparent);
}

.rr-about-timeline__end {
  border-top: 1px solid color-mix(in srgb, var(--color-paper) 10%, transparent);
}

@media (min-width: 640px) {
  .rr-about-hero { padding-bottom: 7rem; }
  .rr-about-values,
  .rr-about-journey { padding: 8rem 0; }
}