/* ==========================================================================
   Coming soon — the only page-specific stylesheet at this stage.
   Everything structural lives in layout.css; this is content dressing.
   ========================================================================== */

.intro__note { display: flex; flex-direction: column; gap: var(--s2); }

/* Practical amenities, two columns of small caps. */
.amenities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3) var(--s4);
  color: var(--c-olive);
}

/* --- sign up ------------------------------------------------------------- */

.signup { display: flex; flex-direction: column; gap: var(--s3); }

.signup__row { display: flex; gap: var(--s3); align-items: stretch; }

.signup__input {
  flex-grow: 1;
  min-width: 0;
  border: none;
  border-block-end: 1px solid var(--c-ink);
  background: transparent;
  color: var(--c-ink);
  font-family: var(--f-ui);
  font-size: var(--t-small);
  padding: var(--s3) var(--s1);
  transition: border-color var(--t-fast) var(--ease);
}
.signup__input::placeholder { color: var(--c-muted); }
.signup__input:hover { border-color: var(--c-accent); }

.button {
  border: 1px solid transparent;
  background: var(--c-ink);
  color: var(--c-cream);
  font-family: var(--f-ui);
  font-size: var(--t-caps);
  font-weight: 500;
  letter-spacing: var(--ls-caps-sm);
  text-transform: uppercase;
  padding: var(--s3) var(--s5);
  min-height: 44px;            /* never below the touch target floor */
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.button:hover { background: var(--c-accent); }
.button:active { transform: translateY(1px); }
.button:disabled { opacity: 0.55; cursor: not-allowed; }
.button:disabled:hover { background: var(--c-ink); }

@media (prefers-reduced-motion: reduce) {
  .button:active { transform: none; }
}

/* Feedback after submitting — hidden until the script has something to say. */
.signup__status { font-size: var(--t-small); color: var(--c-olive); }
.signup__status[hidden] { display: none; }
.signup__status--error { color: var(--c-accent-ink); }

@media (max-width: 480px) {
  .signup__row { flex-direction: column; }
  .amenities { gap: var(--s2) var(--s4); }
}