:root {
  --serif: "Nunito Sans", sans-serif;
  --body: "Nunito Sans", sans-serif;
}

body {
  font-family: var(--body);
}

.brand-name {
  font-family: var(--serif);
}

.hero h1,
.page-hero h1,
.login-card h1,
.success-section h1,
.controller-heading h1 {
  letter-spacing: -0.035em;
}

.page-hero .page-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.page-hero h1 {
  max-width: 850px;
  margin: 22px auto 14px;
  text-wrap: balance;
}

.page-hero p {
  max-width: 560px;
  margin: 0 auto;
  text-wrap: pretty;
}

.page-hero:after {
  pointer-events: none;
}

.campaign-list-heading {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.campaign-list-heading h2 {
  max-width: 900px;
  text-wrap: balance;
}

.results-section > .section-heading {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.results-section > .section-heading > div {
  text-align: center;
}

.login-card > .eyebrow {
  display: flex;
  justify-content: center;
}

.login-card h1 {
  text-align: center;
  text-wrap: balance;
}

.controller-heading {
  position: relative;
  justify-content: center;
}

.controller-heading > div {
  width: 100%;
  text-align: center;
}

.controller-heading form {
  position: absolute;
  right: 0;
}

.controller-heading h1 {
  text-wrap: balance;
}

.controller-heading p {
  margin-inline: auto;
}

.success-section h1 {
  text-wrap: balance;
}

.archive-copy h2,
.section-heading h2,
.contact-card h2,
.vote-card h2,
.admin-card-heading h2,
.campaign-banner h2,
.intro-copy h2 {
  letter-spacing: -0.025em;
}

@media (max-width: 800px) {
  .controller-heading form {
    position: static;
  }

  .controller-heading {
    align-items: center;
  }
}