/* Layout primitives: container, section blocks, skip link. */
.container {
  width: min(var(--container-max), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-pad);
}

.section--soft {
  background: var(--color-soft);
}

.section--dark {
  background: var(--color-forest);
  color: var(--color-white);
}

.section--dark :is(h1, h2, h3) {
  color: var(--color-white);
}

.section--dark a {
  color: var(--color-white);
}

.section--dark :focus-visible {
  outline-color: var(--color-bright-teal);
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-forest);
  color: var(--color-white);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}