* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}

body.page-transition {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.hair {
  border-top: 1px solid var(--hair);
}
.kicker {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terra-700);
  font-weight: 600;
  margin: 0 0 8px;
}
.h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 8vw, 44px);
  font-weight: 700;
  line-height: 1.06;
  margin: 10px 0 12px;
}
.h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 10px;
}
.p {
  color: var(--muted);
  margin: 0 0 14px;
}
.small {
  font-size: 13px;
  color: var(--muted);
}
.section {
  padding: 54px 0;
  background: var(--bg);
}
section.section:nth-of-type(even) {
  background: var(--bg-2);
}
.section--tight {
  padding: 40px 0;
}
.block {
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.7);
  padding: 16px;
}