:root {
  --honey: #C08A3E;
  --honey-dark: #A97835;
  --cream: #F8E4C7;
  --cream-dark: #EFD7AD;
  --ivory: #F5F1EA;
  --smoke: #121212;
  --graphite: #4A4A4A;
  --hairline: rgba(18, 18, 18, 0.14);
  --display: "Fraunces", "Didot", "Times New Roman", serif;
  --sans: "Fraunces", "Didot", "Times New Roman", serif;
  --logo: "Bodoni Moda", "Didot", "Times New Roman", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background: var(--ivory);
  color: var(--smoke);
  font-family: var(--sans);
}
.wordmark {
  display: inline-block;
  font-family: var(--logo);
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--smoke);
  text-decoration: none;
  text-align: center;
}
.wordmark .the {
  display: block;
  font-family: "Pinyon Script", cursive;
  font-size: 0.55em;
  font-weight: 400;
  color: var(--honey);
  margin-bottom: -0.3em;
}
.btn {
  display: inline-block;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--smoke);
  background: var(--cream);
  padding: 1rem 2.5rem;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.btn:hover {
  background: var(--cream-dark);
  transform: translateY(-2px);
}
.btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}