:root{
  --white:#f4f4ef;
  --muted:#d0d2ce;
  --accent:#d97922;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
}

body{
  background:#0b0d0c;
  color:var(--white);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:42px 24px;
  background:url("background.jpg") center center / cover no-repeat;
}

.overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom,rgba(2,4,4,.16),rgba(2,4,4,.25)),
    radial-gradient(circle at center,rgba(0,0,0,.02),rgba(0,0,0,.28) 86%);
}

.content{
  position:relative;
  z-index:1;
  width:min(100%,760px);
  text-align:center;
  animation:fadeIn .8s ease-out both;
}

.logo{
  display:block;
  width:min(220px,42vw);
  height:auto;
  margin:0 auto 24px;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.42));
}

h1{
  margin:0;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.38em;
  font-size:clamp(.95rem,1.8vw,1.5rem);
  font-weight:400;
  letter-spacing:.29em;
  line-height:1.45;
  text-shadow:0 3px 18px rgba(0,0,0,.58);
}

.accent{color:var(--accent)}

.divider{
  width:42px;
  height:2px;
  margin:20px auto 22px;
  background:var(--accent);
}

.tagline{
  margin:0;
  font-size:clamp(.82rem,1.25vw,1rem);
  letter-spacing:.15em;
  line-height:1.7;
  text-transform:uppercase;
  text-shadow:0 3px 16px rgba(0,0,0,.62);
}

.status{
  margin:20px 0 0;
  color:var(--muted);
  font-size:.66rem;
  letter-spacing:.20em;
  text-transform:uppercase;
}

.email{
  display:inline-block;
  margin-top:15px;
  padding-bottom:4px;
  color:var(--white);
  font-size:.88rem;
  text-decoration:none;
  border-bottom:1px solid rgba(217,121,34,.8);
  text-shadow:0 3px 14px rgba(0,0,0,.62);
}

.email:hover,
.email:focus-visible{
  border-color:var(--accent);
  outline:none;
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

@media(max-width:640px){
  .hero{
    padding:28px 18px;
    background-position:55% center;
  }

  .logo{
    width:min(190px,54vw);
    margin-bottom:20px;
  }

  h1{
    gap:.22em;
    letter-spacing:.17em;
    font-size:clamp(.88rem,4vw,1.12rem);
  }

  .tagline{
    letter-spacing:.09em;
    font-size:.82rem;
  }

  .status{
    letter-spacing:.13em;
    line-height:1.6;
    font-size:.62rem;
  }

  .email{
    font-size:.82rem;
    overflow-wrap:anywhere;
  }
}

@media(prefers-reduced-motion:reduce){
  .content{animation:none}
}