/* Wholehearted — the retreat opt-in.
   Loads AFTER styles.css and wholehearted.css and inherits everything.
   One quiet page, one ask: leave your name and hear first when the
   retreat is real. The form is a plain POST to Kit, progressively
   enhanced with fetch for an on-page success state. */

.whr {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.whr main { flex: 1; }

.whr-hero { padding-bottom: clamp(40px, 6vw, 72px); }
.whr-hero__title { font-size: clamp(1.9rem, 5vw, 3.1rem); max-width: 22ch; }

.whr-form-section { padding-block: clamp(24px, 5vw, 64px); }

.whr-form { max-width: 460px; }
.whr-form__field { margin-bottom: 18px; }
.whr-form__label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
  margin-bottom: 8px;
}
.whr-form__input {
  width: 100%;
  padding: 14px 18px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .15s ease;
}
.whr-form__input:focus { outline: none; border-color: var(--coral); }
.whr-form .btn { margin-top: 10px; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.whr-form .btn[disabled] { opacity: .6; cursor: default; transform: none; }

/* Honeypot: visually gone, still in the form for bots to find. */
.whr-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.whr-form__error {
  margin-top: 16px;
  color: var(--coral);
  font-size: .95rem;
}

.whr-promise {
  margin-top: 40px;
  color: var(--muted);
  font-size: .98rem;
  max-width: 46ch;
}
.whr-alt { margin-top: 14px; color: var(--muted); font-size: .95rem; }
.whr-alt a { color: var(--coral); text-decoration: none; }
.whr-alt a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Success state: the form swaps out, this swaps in. */
.whr-success p {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  color: var(--ink);
  font-weight: 500;
  max-width: 40ch;
}

.whr-close { padding-bottom: clamp(72px, 10vw, 132px); }
.whr-back {
  display: inline-block;
  color: var(--muted);
  font-size: .95rem;
  text-decoration: none;
}
.whr-back:hover { color: var(--coral); text-decoration: underline; text-underline-offset: 4px; }