:root {
  color-scheme: only dark;
  --bg: #0b0b0b;
  --fg: #f4f4f4;
  --muted: #b9b9b9;
  --font: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
  --tracking-body: 0.08em;
  --max-width: 680px;
  --hero-pad: clamp(24px, 5vw, 64px);
  --lockup-size: clamp(240px, 42vw, 420px);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font);
  background: radial-gradient(circle at top, #111 0%, #0b0b0b 50%, #060606 100%);
  color: var(--fg);
  min-height: 100vh;
}

.page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hero-pad);
}

.hero {
  width: 100%;
  display: flex;
  justify-content: center;
}

.hero__frame {
  width: min(100%, var(--max-width));
  text-align: center;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.hero__lockup {
  width: var(--lockup-size);
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.6));
}

.hero__subtitle {
  margin: 0;
  color: var(--muted);
  font-size: clamp(12px, 1.6vw, 14px);
  letter-spacing: var(--tracking-body);
}

@media (max-width: 600px) {
  .hero__frame {
    gap: 10px;
  }
}