.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:440px;
  margin:1rem auto 0;
  padding:2.25rem 2rem;
  text-align:center;
}

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

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

.contact-gate p.contact-gate-error{
  color:var(--color-red-bright);
  animation:exoworoShake .45s ease;
}

@keyframes exoworoShake{
  20%,60%{ transform:translateX(-6px); }
  40%,80%{ transform:translateX(6px); }
}

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

.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{
  padding:1.75rem 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:.75rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--color-text-dim);
  margin-bottom:.35rem;
}

.contact-item a{
  color:var(--color-text);
  font-size:1rem;
  transition:color .25s ease;
}

.contact-item a:hover{
  color:var(--color-red-bright);
}

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

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

.contact-form-wrap{
  padding:2rem;
}

@media (max-width:520px){
  .contact-form-wrap{
    padding:1.25rem;
  }
}

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

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

.contact-form input,
.contact-form textarea{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:10px;
  padding:.7rem .85rem;
  color:var(--color-text);
  font-family:inherit;
  font-size:1rem;
  transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.contact-form input:hover,
.contact-form textarea:hover{
  border-color:#3a3a3a;
}

.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--color-red);
  box-shadow:0 0 0 3px rgba(200,20,20,.25);
  background:#0d0d0d;
}

.contact-form textarea{
  resize:vertical;
  min-height:140px;
}

/* Honeypot: invisible to people */
.hp-field{
  position:absolute !important;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
}

.contact-form button{
  align-self:flex-start;
}

.btn-spinner{
  display:none;
  width:14px;
  height:14px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:exoworoSpin .7s linear infinite;
}

.btn.is-loading .btn-spinner{
  display:inline-block;
}

@keyframes exoworoSpin{
  to{ transform:rotate(360deg); }
}

.form-note{
  display:none;
  padding:.7rem .9rem;
  border-radius:10px;
  font-size:.92rem;
  border:1px solid var(--color-border);
}

.form-note.is-shown{
  display:block;
  animation:exoworoNoteIn .4s var(--ease);
}

.form-note.is-info{
  color:var(--color-text-dim);
}

.form-note.is-success{
  color:#7dffb0;
  border-color:rgba(60,200,120,.5);
  background:rgba(60,200,120,.08);
}

.form-note.is-error{
  color:var(--color-red-bright);
  border-color:rgba(200,20,20,.6);
  background:rgba(200,20,20,.08);
}

@keyframes exoworoNoteIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}