:root {
  --color-background: #f4efe2;
  --color-primary: #3cc;
  --project-gap: clamp(4rem, 6vw, 8rem);
  --space-clamp: clamp(1rem, 3vw, 3rem);
}

@supports (color: color(display-p3 1 1 1)) {
  :root {
    --color-background: color(display-p3 0.9529 0.9373 0.8902);
    --color-primary: color(display-p3 0.2 0.8 0.8);
  }
}

body {
  background: var(--color-background);
}

h3 {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.06em;
}

p {
  line-height: 1.5;
  max-width: 40rem;
}

a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

img {
  display: block;
  width: 100%;
}

/* Branding */
.logo {
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 0.8;
  max-width: 8ch;
}

footer {
  min-height: 20rem;
}

footer .layer-inset {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
}