:root {
  color-scheme: dark;
  background: #000;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 0;
  min-height: 100%;
  margin: 0;
  background: #000;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
}

.identity {
  --optical-shift: -2.5svh;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: clamp(2rem, 7vw, 5rem) 1.5rem;
  text-align: center;
  opacity: 0;
  transform: translateY(calc(var(--optical-shift) + 5px));
  animation: reveal 760ms cubic-bezier(.22, 1, .36, 1) 80ms forwards;
}

.brand-mark {
  position: relative;
  width: clamp(6.75rem, 12vw, 10.5rem);
  aspect-ratio: .88;
  margin-bottom: clamp(1.9rem, 3.8vw, 3rem);
  filter: none;
}

.brand-mark__stroke {
  position: absolute;
  inset: -2% 37%;
  background: linear-gradient(
    90deg,
    #f7f7f7 0%,
    #b9b9b9 23%,
    #fff 48%,
    #a9a9a9 73%,
    #ededed 100%
  );
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.brand-mark__stroke--forward {
  transform: rotate(38deg);
}

.brand-mark__stroke--back {
  transform: rotate(-38deg);
  background: linear-gradient(
    90deg,
    #b7b7b7 0%,
    #f6f6f6 28%,
    #9e9e9e 57%,
    #f2f2f2 100%
  );
}

.brand-mark__cut {
  position: absolute;
  z-index: 2;
  width: 43%;
  height: 9.5%;
  background: #000;
  transform: rotate(38deg);
}

.brand-mark__cut--top {
  top: 21%;
  left: 8%;
}

.brand-mark__cut--bottom {
  right: 8%;
  bottom: 21%;
}

h1 {
  max-width: 100%;
  margin: 0;
  padding-left: .72em;
  color: #f0f0f0;
  font-size: clamp(2rem, 5.4vw, 4.25rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .72em;
  text-transform: uppercase;
}

p {
  max-width: 100%;
  margin: clamp(1.05rem, 2vw, 1.45rem) 0 0;
  padding-left: .56em;
  color: #aaa;
  font-size: clamp(.62rem, 1.2vw, .8rem);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: .56em;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(var(--optical-shift));
  }
}

@media (max-width: 390px) {
  .identity {
    --optical-shift: -1.25svh;
    padding-inline: 1rem;
  }

  h1 {
    padding-left: .5em;
    font-size: clamp(1.75rem, 9.2vw, 2.2rem);
    letter-spacing: .5em;
  }

  p {
    padding-left: .3em;
    font-size: clamp(.54rem, 2.65vw, .64rem);
    letter-spacing: .3em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .identity {
    opacity: 1;
    transform: translateY(var(--optical-shift));
    animation: none;
  }
}