:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #000;
}

/* ---- mailing list, under the name ---- */
:root {
  --font: ui-monospace, "SF Mono", Menlo, monospace;
  --text-body: 0.8125rem;  --leading-body: 1.231;  --tracking-body: -0.006em;
  --text-footnote: 0.625rem; --leading-footnote: 1.3;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 2rem;
  --color-bg: #000;
  --color-fg: #fff;
  --color-muted: color-mix(in srgb, var(--color-fg) 55%, var(--color-bg));
  --btn-bg: color-mix(in srgb, var(--color-fg) 12%, transparent);
  --btn-hover-bg: color-mix(in srgb, var(--color-fg) 20%, transparent);
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  width: 400px;
  max-width: calc(100vw - 32px);
}
.name {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-fg);
  text-align: center;
}

.mail-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-fg);
}
.mail-row { display: flex; gap: var(--space-2); }
.mail-honeypot {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mail-input {
  flex: 1;
  min-width: 0;
  height: calc(1lh + 2 * var(--space-2));
  border: 1px solid color-mix(in srgb, var(--color-fg) 25%, transparent);
  border-radius: 8px;
  background: transparent;
  color: var(--color-fg);
  font: inherit;
  padding: 0 var(--space-3);
}
.mail-input::placeholder { color: var(--color-muted); }
.mail-input:focus-visible { outline: none; border-color: var(--color-fg); }
.mail-input:-webkit-autofill,
.mail-input:-webkit-autofill:hover,
.mail-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-fg);
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg) inset;
  caret-color: var(--color-fg);
  transition: background-color 9999s ease-out 0s;
}
.mail-submit {
  appearance: none;
  height: calc(1lh + 2 * var(--space-2));
  display: inline-flex;
  align-items: center;
  border: 0;
  border-radius: 8px;
  background: var(--btn-bg);
  color: var(--color-fg);
  cursor: pointer;
  font: inherit;
  padding: 0 var(--space-3);
  transition: background-color 0.3s ease;
}
.mail-submit:hover { background-color: var(--btn-hover-bg); }
.mail-submit:disabled { opacity: 0.5; cursor: default; }
.mail-title { margin: 0; text-align: center; }
.mail-status, .mail-note {
  margin: 0;
  font-size: var(--text-footnote);
  line-height: var(--leading-footnote);
  color: var(--color-muted);
}
.mail-status:not(:empty) { margin-top: var(--space-1); }
.mail-status[data-state="error"] { color: var(--color-fg); }
.mail-note { margin-top: var(--space-2); text-align: center; }

/* Success (same mechanic as the main site): a valid submit swaps field + button for a
   naked checkmark + sentence, centred in the control row's height. */
.form-success {
  display: none;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: calc(1lh + 2 * var(--space-2));
  margin: 0;
  color: var(--color-fg);
  outline: none;
}
.form-success svg { flex: none; }
.mail-form.is-success .form-success { display: flex; }
.mail-form.is-success .mail-input,
.mail-form.is-success .mail-submit { display: none; }

/* iOS Safari auto-zooms when a focused input is below 16px (same guard as klingt / async).
   Last in the file on purpose: the button's own height rule must not outrank the stretch. */
@media (pointer: coarse) {
  .mail-input { font-size: 16px; }
  .mail-submit { height: auto; }
}