:root {
  --contact-bg: #f3f0ea;
  --contact-surface: #fffdf8;
  --contact-ink: #2a2622;
  --contact-muted: #6b635a;
  --contact-line: #d9d0c4;
  --contact-accent: #3f5d4a;
  --contact-accent-hover: #334c3d;
  --contact-danger: #8a3b32;
  --contact-ok: #2f5d45;
  --contact-focus: #2f6fed;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--contact-ink);
  background:
    radial-gradient(circle at top left, rgba(63, 93, 74, 0.12), transparent 40%),
    linear-gradient(180deg, #ebe6de 0%, var(--contact-bg) 45%, #e7e1d8 100%);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  line-height: 1.7;
}

.contact-form {
  width: min(40rem, calc(100% - 2rem));
  margin: 2rem auto;
  padding: 1.75rem 1.25rem 2rem;
  background: var(--contact-surface);
  border: 1px solid var(--contact-line);
}

.contact-form__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.contact-form__lead {
  margin: 0.5rem 0 1.25rem;
  color: var(--contact-muted);
}

.contact-form__status {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--contact-line);
}

.contact-form__status--pending {
  color: var(--contact-muted);
}

.contact-form__status--success {
  color: var(--contact-ok);
  border-color: rgba(47, 93, 69, 0.35);
}

.contact-form__status--error {
  color: var(--contact-danger);
  border-color: rgba(138, 59, 50, 0.35);
}

.contact-form--done .contact-form__title {
  color: var(--contact-ok);
}

.contact-form__done {
  margin: 0;
  padding: 1rem 0 0.25rem;
}

.contact-form__done-body {
  margin: 0;
  color: var(--contact-ink);
  white-space: pre-wrap;
}

.contact-form__field {
  margin: 0 0 1rem;
}

.contact-form__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.95rem;
}

.contact-form__input,
.contact-form__textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--contact-line);
  background: #fff;
  color: var(--contact-ink);
  font: inherit;
}

.contact-form__textarea {
  resize: vertical;
  min-height: 10rem;
}

.contact-form__input:focus,
.contact-form__textarea:focus,
.contact-form__submit:focus {
  outline: 2px solid var(--contact-focus);
  outline-offset: 2px;
}

.contact-form__input[aria-invalid="true"],
.contact-form__textarea[aria-invalid="true"] {
  border-color: var(--contact-danger);
}

.contact-form__error {
  margin: 0.35rem 0 0;
  color: var(--contact-danger);
  font-size: 0.9rem;
}

.contact-form__actions {
  margin: 1.25rem 0 0;
}

.contact-form__submit {
  min-height: 2.75rem;
  padding: 0.7rem 1.4rem;
  border: 0;
  background: var(--contact-accent);
  color: #fff;
  font: inherit;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.contact-form__submit:hover {
  background: var(--contact-accent-hover);
}

.contact-form__submit:disabled {
  opacity: 0.7;
  cursor: wait;
}

.contact-form__honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (min-width: 48rem) {
  .contact-form {
    margin: 3rem auto;
    padding: 2.25rem 2rem 2.5rem;
  }

  .contact-form__title {
    font-size: 1.75rem;
  }
}