/* --space-xl top, not 8rem. .main-content already reserves 4.5rem of clearance
   under the fixed header, so an 8rem inset on top of it opened ~200px of empty
   paper above the kicker — more than twice what essays or playlists spend, and
   the phone rule below has always used --space-xl anyway. One opening rhythm
   across the site; see the note on .genres-main in artist_detail.css. */
.about-page {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-3xl);
  color: var(--color-text);
}

/* ---- Hero ---- */
.about-hero {
  padding-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-black);
  margin-bottom: var(--space-xl);
}

.about-kicker {
  font-family: var(--font-content);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-heading-muted);
  margin: 0 0 var(--space-xs);
}

.about-title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-sm);
  text-wrap: balance;
}

.about-deck {
  font-style: italic;
  font-size: var(--font-size-lg);
  color: var(--color-gray-text);
  line-height: var(--line-height-tight);
  margin: 0;
}

/* ---- Body copy ---- */
.about-body {
  font-size: 1.1rem;
  line-height: var(--line-height-relaxed);
}

.about-body p {
  margin: 0 0 var(--space-md);
}

.about-body a.content-text-link {
  white-space: nowrap;
}

/* ---- Section bars ---- */
.about-section-bar {
  border-top: 2px solid var(--color-black);
  padding-top: 0.6rem;
  margin: var(--space-2xl) 0 var(--space-md);
}

.about-section-bar span {
  font-family: var(--font-content);
  font-size: 0.8rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-wide);
  color: var(--color-heading-text);
}

/* ---- Principles list ---- */
.about-principles {
  list-style: none;
  margin: 0;
  padding: 0;
}

.about-principles li {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-tight);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-divider);
}

.about-principles li:last-child {
  border-bottom: none;
}

/* ---- Newsletter signup block ---- */
.about-signup {
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 2px solid var(--color-black);
}

.about-signup-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-xs);
}

.about-signup-note {
  font-size: 1.05rem;
  line-height: var(--line-height-body);
  color: var(--color-heading-muted);
  margin: 0 0 var(--space-lg);
}

/* Trust microcopy under the form: matches the newsletter page. */
.about-trust {
  font-size: var(--font-size-xs);
  color: var(--color-subtle-text);
  margin: var(--space-sm) 0 0;
}

@media (max-width: 54rem) { /* --bp-phone */
  .about-page {
    padding: var(--space-xl) var(--space-md) var(--space-2xl);
  }
}