body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-cream);
  overflow-x: clip;
}

.l-main {
  padding-top: calc(var(--header-height) + var(--announcement-height));
}

[id] {
  scroll-margin-top: calc(var(--header-height) + var(--announcement-height) + 1rem);
}

.l-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.l-section {
  padding-top: var(--sp-2xl);
  padding-bottom: var(--sp-2xl);
}

.l-section--compact {
  padding-top: var(--sp-xl);
  padding-bottom: var(--sp-xl);
}

.l-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-lg);
}

.l-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
}

.l-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.l-spacer {
  height: 100px;
}