/* Mobile-first. No web fonts, no third-party anything. */

:root {
  color-scheme: light dark;
  --bg: #fbfaf8;
  --surface: #ffffff;
  --ink: #16150f;
  --ink-soft: #5c5a51;
  --line: #e3e0d8;
  --accent: #1c4b3c;
  --accent-ink: #ffffff;
  --ok-bg: #e8f3ec;
  --ok-ink: #14533c;
  --err-bg: #fbeceb;
  --err-ink: #8a2118;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14140f;
    --surface: #1d1d17;
    --ink: #f2f0e8;
    --ink-soft: #a5a294;
    --line: #33322a;
    --accent: #7fd0ac;
    --accent-ink: #10221b;
    --ok-bg: #163024;
    --ok-ink: #9fe0c1;
    --err-bg: #351916;
    --err-ink: #f0a89f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

/* Masthead stays tight so the form is reachable without scrolling. */
.masthead { margin: 0 0 1rem; }

h1 {
  margin: 0 0 .35rem;
  font-size: 1.75rem;
  letter-spacing: -.02em;
}

.lede {
  margin: 0;
  color: var(--ink-soft);
  font-size: .95rem;
}

h2 {
  margin: 0 0 .25rem;
  font-size: 1.05rem;
  letter-spacing: -.01em;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .75rem;
  padding: 1rem;
  margin-bottom: .875rem;
}

.card--primary { border-color: var(--accent); }

.note {
  margin: 0 0 .75rem;
  color: var(--ink-soft);
  font-size: .875rem;
}

.note--small { font-size: .8rem; margin: .4rem 0 .9rem; }

.optional { color: var(--ink-soft); font-weight: 400; font-size: .8rem; }

textarea, input[type=text], input[type=email], select {
  width: 100%;
  padding: .65rem .7rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 1rem; /* 16px keeps iOS from zooming on focus */
}

textarea { resize: vertical; min-height: 6.5rem; }

label[for] { display: block; margin: .75rem 0 .3rem; font-size: .875rem; }

.counter {
  margin: .3rem 0 0;
  text-align: right;
  font-size: .75rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.consent {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  margin-top: .9rem;
  font-size: .875rem;
  cursor: pointer;
}

.consent input { margin-top: .2rem; flex: none; width: 1.05rem; height: 1.05rem; }

button, .button {
  display: block;
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--accent);
  border-radius: .5rem;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

button:disabled { opacity: .55; cursor: default; }

.button--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.msg {
  margin: 0 0 .85rem;
  padding: .6rem .7rem;
  border-radius: .5rem;
  font-size: .875rem;
}

.msg--ok  { background: var(--ok-bg);  color: var(--ok-ink); }
.msg--err { background: var(--err-bg); color: var(--err-ink); }

footer {
  margin-top: 1.5rem;
  color: var(--ink-soft);
  font-size: .8rem;
}

footer a { color: inherit; }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.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-path: inset(50%);
  overflow: hidden;
}

[hidden] { display: none !important; }

/* The whole page is a form, so the keyboard focus ring is load-bearing.
   The browser default is a thin ring that disappears against both the paper
   and the dark palette, so it is replaced with one drawn in the accent
   colour plus an offset, which reads on either background.
   :focus-visible rather than :focus, so a mouse click on the textarea does
   not leave a ring sitting there. */
:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}