.contact-page{
  padding-block:3rem;
}

.contact-page h1{
  font-family:var(--font-orbitron);
  font-size:2rem;
  margin-bottom:2rem;
  color:var(--color-text);
}

.contact-gate{
  max-width:420px;
  margin:0 auto;
  background:var(--color-bg-alt);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:2rem;
  text-align:center;
}

.contact-gate h1{
  font-size:1.4rem;
  margin-bottom:.75rem;
}

.contact-gate p{
  font-size:.9rem;
  color:var(--color-text-dim);
  margin-bottom:1.25rem;
}

.contact-gate-error{
  color:var(--color-red);
}

.contact-gate-form{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}

.contact-gate-form button{
  background:var(--color-red);
  color:#fff;
  padding:.6rem 1.4rem;
  border-radius:8px;
  font-family:var(--font-orbitron);
  font-size:.85rem;
}

.contact-grid{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:2rem;
  align-items:start;
}

@media (max-width:800px){
  .contact-grid{
    grid-template-columns:1fr;
  }
}

.contact-details{
  background:var(--color-bg-alt);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:1.5rem;
}

.contact-item{
  margin-bottom:1.5rem;
}

.contact-item:last-child{
  margin-bottom:0;
}

.contact-label{
  display:block;
  font-family:var(--font-orbitron);
  font-size:.8rem;
  color:var(--color-text-dim);
  margin-bottom:.35rem;
}

.contact-item a{
  color:var(--color-text);
  font-size:.95rem;
}

.contact-socials{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.contact-socials a{
  color:var(--color-red);
}

.contact-form-wrap{
  background:var(--color-bg-alt);
  border:1px solid var(--color-border);
  border-radius:var(--radius);
  padding:2rem;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.contact-form label{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  font-size:.85rem;
  color:var(--color-text-dim);
}

.contact-form input,
.contact-form textarea{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:8px;
  padding:.65rem .75rem;
  color:var(--color-text);
  font-family:inherit;
  font-size:.9rem;
}

.contact-form textarea{
  resize:vertical;
}

.contact-form button{
  align-self:flex-start;
  background:var(--color-red);
  color:#fff;
  padding:.65rem 1.5rem;
  border-radius:8px;
  font-family:var(--font-orbitron);
  font-size:.85rem;
}