:root {
  color-scheme: dark;

  --background: #0b0d10;
  --foreground: #e9e6df;
  --muted: #8e9197;
  --accent: #a9966f;

  --page-padding: clamp(1.5rem, 5vw, 5rem);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--background);
}

body {
  min-height: 100vh;
  margin: 0;

  display: grid;
  grid-template-rows: 1fr auto;

  color: var(--foreground);
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(169, 150, 111, 0.08),
      transparent 32rem
    ),
    var(--background);

  font-family:
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

  text-rendering: optimizeLegibility;
}

.landing {
  display: grid;
  place-items: center;
  padding: var(--page-padding);
}

.identity {
  width: min(100%, 60rem);
  text-align: center;
}

.eyebrow {
  margin: 0 0 2rem;

  color: var(--accent);

  font-size: clamp(0.7rem, 1vw, 0.85rem);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

h1 {
  margin: 0;

  font-size: clamp(3rem, 10vw, 8rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.045em;
}

h1 span {
  display: block;

  margin: 0.7em 0;

  color: var(--muted);

  font-size: 0.18em;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-transform: uppercase;
}

.rule {
  width: clamp(3rem, 8vw, 5rem);
  height: 1px;

  margin: 2.75rem auto;

  background: var(--accent);
  opacity: 0.8;
}

.tagline {
  margin: 0;

  color: var(--muted);

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-style: italic;
  letter-spacing: 0.03em;
}

footer {
  padding:
    0
    var(--page-padding)
    clamp(1.5rem, 4vw, 3rem);

  color: #60646a;

  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

footer p {
  margin: 0;
}

@media (max-width: 35rem) {
  h1 {
    letter-spacing: -0.03em;
  }

  h1 span {
    letter-spacing: 0.3em;
  }
}