/* ── Contact page ────────────────────────────────────────────────────────────
   Mirrors the home/shows/signup layout. Inherits base.css + index.css.
   ──────────────────────────────────────────────────────────────────────────── */

.contact-content { margin-top: clamp(18px, 3vh, 28px); max-width: 420px; }

.contact-email {
  display: inline-block;
  margin-bottom: 18px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .06em;
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.3);
  padding-bottom: 2px;
}
.contact-email:hover { border-color: #111; }

.contact-form { display: flex; flex-direction: column; gap: 12px; }

.name-row { display: flex; gap: 12px; }
.name-row .input { flex: 1 1 0; min-width: 0; }

.input {
  width: 100%;
  padding: 13px 16px;
  font-family: 'Cinzel', serif;
  font-size: .9rem;
  color: #111;
  background: #fff;
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 8px;
  outline: none;
  transition: border-color .2s ease;
}
.input::placeholder { color: #999; }
.input:focus { border-color: #111; }

.textarea { resize: vertical; min-height: 96px; line-height: 1.5; }

.btn {
  margin-top: 2px;
  width: 100%;
  padding: 13px 16px;
  font-family: 'Cinzel', serif;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: #111;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.btn:hover { background: #000; transform: translateY(-1px); }
.btn:disabled { opacity: .6; cursor: default; transform: none; }

.message {
  margin-top: 4px;
  font-family: 'Cinzel', serif;
  font-size: .82rem;
  letter-spacing: .04em;
  min-height: 1.2em;
}
.message--success { color: #1a7f3c; }
.message--error { color: #b3261e; }

.tour-back {
  display: inline-block;
  margin-top: 14px;
  font-family: 'Cinzel', serif;
  font-style: italic;
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #888;
  text-decoration: none;
}
.tour-back:hover { color: #111; }

/* ── Mobile: same as the others — image left, form in the right white column ─ */
@media (max-width: 540px) {
  .tour-back { position: fixed; left: 58vw; top: 30%; z-index: 5; margin: 0; }
  .contact-content {
    position: fixed;
    left: 58vw;
    right: 3vw;
    top: 37%;
    z-index: 5;
    margin: 0;
    max-width: none;
  }
  /* let the long email shrink + wrap instead of clipping off the right edge */
  .contact-email {
    font-size: .76rem;
    margin-bottom: 12px;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .name-row { flex-direction: column; gap: 10px; }   /* stack names on phones */
  .contact-form { gap: 10px; }
  .input { font-size: .85rem; padding: 10px 12px; }
  .textarea { min-height: 72px; }
  .btn { font-size: .74rem; padding: 11px 13px; }
}