:root {
  color-scheme: dark;
  --background: #000;
  --foreground: #f5f4f0;
  --edge: clamp(1.25rem, 3.2vw, 3rem);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--background);
  color: var(--foreground);
}

* { box-sizing: border-box; }

body { margin: 0; }

.teaser {
  min-height: 100svh;
  display: grid;
  grid-template-rows: minmax(15rem, 1fr) auto;
}

.composition {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 15rem;
}

h1 {
  position: relative;
  margin: 0;
  color: var(--foreground);
  font-size: min(19vw, 19rem);
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 1;
  white-space: nowrap;
  padding-right: 0.065em;
}

.teaser h1 { overflow: hidden; line-height: 1.15; }
.wordmark { display: block; perspective: 800px; }
.wordmark > span { display: inline-block; transform-origin: 50% 100%; }
.wordmark > span:nth-child(1) { --order: 0; }
.wordmark > span:nth-child(2) { --order: 1; }
.wordmark > span:nth-child(3) { --order: 2; }
.wordmark > span:nth-child(4) { --order: 3; }
.wordmark > span:nth-child(5) { --order: 4; }
.wordmark > span:nth-child(6) { --order: 5; }
.wordmark > span:nth-child(7) { --order: 6; }
.wordmark > span:nth-child(8) { --order: 7; }
.wordmark > span:nth-child(9) { --order: 8; }

@media (prefers-reduced-motion: no-preference) {
  .wordmark > span {
    animation: projector-reveal 950ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--order) * 55ms);
  }
}

@keyframes projector-reveal {
  0% { transform: translateY(115%) rotateX(-80deg) rotateZ(8deg); color: #b6a0ff; }
  55% { color: #d4ff1b; }
  75% { transform: translateY(-0.055em) rotateX(0deg) rotateZ(-1deg); }
  100% { transform: translateY(0) rotateX(0deg) rotateZ(0deg); color: var(--foreground); }
}

.footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 0 var(--edge) var(--edge);
  font-size: 1rem;
  line-height: 1.4;
}

.footer p { margin: 0; }

@media (max-width: 35rem) {
  .footer { flex-wrap: wrap; }
}

.error-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4rem;
  padding: var(--edge);
}

.error-page h1 {
  font-size: clamp(3rem, 12vw, 10rem);
  white-space: normal;
}

.error-page p { margin: 1.5rem 0 0; font-size: 1rem; line-height: 1.5; }
.error-page a { color: inherit; text-underline-offset: 0.2em; }
.error-page a:focus-visible { outline: 2px solid; outline-offset: 4px; }