/* A soft pink light falls from the top of the page, the color of the heart. */
.supporters-page {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
  background:
    radial-gradient(
      ellipse 70rem 32rem at 50% -8rem,
      var(--color-supporters-glow),
      var(--color-clear) 70%
    ),
    var(--color-launcher-background);
}

.supporters-bar {
  display: flex;
  padding: max(var(--space-4), env(safe-area-inset-top))
    max(var(--space-gutter), env(safe-area-inset-right)) var(--space-4)
    max(var(--space-gutter), env(safe-area-inset-left));
}

.supporters {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  inline-size: 100%;
  max-inline-size: calc(var(--layout-supporters-max-width) + 2 * var(--space-gutter));
  margin-inline: auto;
  padding: var(--space-4) max(var(--space-gutter), env(safe-area-inset-right))
    max(var(--space-16), env(safe-area-inset-bottom))
    max(var(--space-gutter), env(safe-area-inset-left));
}

.supporters-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
}

.heart-badge {
  display: grid;
  place-items: center;
  inline-size: var(--size-heart-badge);
  block-size: var(--size-heart-badge);
  margin-block-end: var(--space-2);
  color: var(--color-white);
  background: linear-gradient(
    to bottom,
    var(--color-heart-badge-top),
    var(--color-heart-badge-bottom)
  );
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-heart-badge);
}

.heart-badge .icon {
  inline-size: 50%;
  block-size: 50%;
}

.supporters-hero__title,
.supporters-hero__lead,
.section-title,
.empty__title,
.empty__body {
  margin: 0;
}

.supporters-hero__title {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.supporters-hero__lead {
  max-inline-size: 34ch;
  font-size: var(--font-size-apple-body);
  line-height: var(--leading-apple-body);
  color: var(--color-label-tertiary);
}

.supporters-hero__donate {
  margin-block-start: var(--space-2);
}

.supporters-hero__donate .icon {
  color: var(--color-heart);
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  inline-size: min(26rem, 100%);
  margin: var(--space-4) 0 0;
}

.stats__item {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: var(--color-launcher-surface);
  border: var(--border-width-hairline) solid var(--color-launcher-separator);
  border-radius: var(--radius-tile);
}

.stats__label {
  font-size: var(--font-size-apple-footnote);
  line-height: var(--leading-apple-footnote);
  color: var(--color-label-muted);
}

.stats__value {
  margin: 0;
  font-size: var(--font-size-apple-title-1);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-apple-title);
  letter-spacing: var(--tracking-title);
}

.section-title {
  font-size: var(--font-size-apple-title-1);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-apple-title);
  letter-spacing: var(--tracking-title);
}

.empty {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-10) var(--space-6);
  text-align: center;
  background: var(--color-launcher-surface);
  border: var(--border-width-hairline) solid var(--color-launcher-separator);
  border-radius: var(--radius-card);
}

.empty__title {
  font-size: var(--font-size-apple-title-3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-apple-title);
}

.empty__body {
  color: var(--color-label-muted);
}