@font-face {
  font-family: "MedievalSharp";
  src: url("fonts/MedievalSharp-Regular.woff2") format("woff2"),
       url("fonts/MedievalSharp-Regular.woff") format("woff"),
       url("fonts/MedievalSharp-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --sand: #bea595;
  --teal: #3f6b7b;
  --moss: #87af57;
  --slate: #475150;
  --deep: #2b3c47;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "MedievalSharp", Georgia, "Times New Roman", serif;
  color: var(--sand);
  background:
    radial-gradient(circle at 15% 20%, rgba(135, 175, 87, 0.2), transparent 35%),
    radial-gradient(circle at 80% 10%, rgba(190, 165, 149, 0.2), transparent 30%),
    linear-gradient(160deg, var(--deep) 0%, var(--slate) 100%);
}

.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.card {
  width: min(700px, 100%);
  padding: 2.5rem 2rem;
  text-align: center;
  background: rgba(43, 60, 71, 0.65);
  border: 2px solid rgba(190, 165, 149, 0.45);
  border-radius: 14px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.35);
  animation: rise-in 700ms ease-out both;
}

.eyebrow {
  margin: 0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss);
  font-size: 0.85rem;
}

h1 {
  margin: 0.6rem 0 1rem;
  color: var(--sand);
  font-size: clamp(2rem, 7vw, 4.2rem);
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.subtitle {
  margin: 0;
  color: #d9c6ba;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
}

.contact {
  margin-top: 1.4rem;
  color: #d2dfcc;
}

.contact a {
  color: var(--moss);
  text-underline-offset: 0.18em;
}

.contact a:hover {
  color: var(--sand);
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 520px) {
  .card {
    padding: 2rem 1.2rem;
  }
}