/* vakana.mg mailing-list — coming-soon page additions.
   Reuses the palette and components from site.css (--ink, --hand, --primary,
   .glyph-input, .cta). This file only adds the coming-soon layout plus the
   "ping me" line and signup form. */

/* ---- coming-soon stage (mirrors the live page's inline block) -------- */
.cs-stage { min-height: 100vh; }

.cs-brand {
  width: min(440px, 72vw);
  height: auto;
  display: block;
  margin: 0 auto 1.25rem;
}

.cs-soon {
  font-family: var(--hand);
  font-size: clamp(3rem, 9vw, 5.5rem);
  color: var(--ink-mute);
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* ---- the new "ping me" line ----------------------------------------- */
.cs-ping {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  color: var(--ink-mute);
  margin: 1.5rem 0 1.5rem;
}

/* ---- signup form ----------------------------------------------------- */
.ping-form {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
}

.ping-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.ping-row .glyph-input { flex: 1; }

/* The site's .cta is an inline-block anchor; as a form button it needs a
   couple of resets to line up with the input. */
.ping-form .cta {
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.95rem;
}
.ping-form .cta:disabled { opacity: 0.6; cursor: default; }

/* Honeypot — visually and programmatically hidden from humans. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.ping-msg {
  min-height: 1.4em;
  margin: 0.9rem 0 0;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink-mute);
}
.ping-msg.ok  { color: var(--primary); }
.ping-msg.err { color: #b3401f; }

@media (max-width: 420px) {
  .ping-row { flex-direction: column; }
}