:root {
  --brand-cream: #fcead0;
  --page-padding: clamp(1.5rem, 5vw, 4rem);

  color-scheme: dark;
  background: #000;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #000;
}

.brand {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--page-padding);
  place-items: center;
}

.brand__lockup {
  display: flex;
  width: min(100%, 44rem);
  flex-direction: column;
  align-items: center;
}

.brand__mark {
  display: block;
  width: min(
    100%,
    40rem,
    76svh,
    calc(100svh - (2 * var(--page-padding)))
  );
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.brand__name {
  margin: clamp(-4rem, -6vw, -2.5rem) 0 0;
  color: var(--brand-cream);
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.65rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  text-shadow: 0 0 1.5rem rgb(252 234 208 / 8%);
  text-transform: uppercase;
  white-space: nowrap;
}