:root {
  /* Aspire colors: change them here and every page follows */
  --blue: #2A5599;
  --blue-hover: #1D3D70;
  --charcoal: #58585A;
  --light-blue: #8AAEE6;
  --tint: #EAF0FA;
  --dark: #0E1116;
  --ink: #111111;
  --surface-alt: #F4F5F7;
  --hairline: #D5D7DC;
  --white: #FFFFFF;
  --serif: 'EB Garamond', Garamond, Georgia, serif;
  --sans: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--white); }
.site { width: 100%; background: var(--white); color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 1.65; }
a { color: var(--blue); }
a:hover { color: var(--blue-hover); }
img { max-width: 100%; }

/* Phones: scale the big headlines and spacing down */
@media (max-width: 700px) {
  .site .hero-display { font-size: 48px !important; }
  .site h2 { font-size: 34px !important; }
  .site section > div { padding-left: 20px !important; padding-right: 20px !important; padding-top: 64px !important; padding-bottom: 64px !important; }
  .site header > div { padding: 14px 20px !important; }
  .site header nav { gap: 10px 18px !important; font-size: 14px !important; }
  .site header img { height: 40px !important; }
}