* { box-sizing: border-box }

html { background: var(--night) }

body {
  margin: 0;
  color: var(--cream);
  font: 400 var(--t-body)/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cream) }
a:hover { color: var(--amber) }
img { display: block }

h2 { font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.035em; margin: var(--s-1) 0 var(--s-3) }
h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 var(--s-1) }
p { margin: 0 0 var(--s-2) }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter) }

.page-section { padding: var(--s-7) 0; border-top: 1px solid var(--rule) }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: center }

.columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5) }

@media (max-width: 900px) {
  .page-section { padding: var(--s-6) 0 }
  .split, .columns { grid-template-columns: 1fr; gap: var(--s-4) }
}