:root {
  color-scheme: light;
  --page-background: #fff;
  --brand-color: #171717;
  --page-gutter: clamp(1rem, 4vw, 3rem);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page-background);
  color: var(--brand-color);
  font-family: system-ui, sans-serif;
}

.homepage {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--page-gutter);
  padding-top: max(var(--page-gutter), env(safe-area-inset-top));
  padding-right: max(var(--page-gutter), env(safe-area-inset-right));
  padding-bottom: max(var(--page-gutter), env(safe-area-inset-bottom));
  padding-left: max(var(--page-gutter), env(safe-area-inset-left));
}

.brand {
  margin: 0;
  width: 100%;
  max-width: min(48rem, 180svh);
  line-height: 0;
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 599px) {
  .brand {
    max-width: min(22rem, 75svh);
  }
}