/* The enquiry form. Loaded only by /contact/, so a reader who never reaches it
   never downloads it. Every value comes from tokens.css. */

.contact {
  margin: var(--space-7) 0 var(--space-8);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.contact__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-5);
}

.contact__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: var(--tracking-subheading);
  color: var(--ink);
}

.contact__optional {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-left: var(--space-2);
}

.contact__input {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  width: 100%;
}

.contact__input--area { resize: vertical; min-height: 8rem; }

.contact__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* :invalid alone would paint every empty required field red before the reader
   has typed anything, so the state is only shown once the form has been sent. */
.contact--submitted .contact__input:invalid {
  border-color: var(--accent);
}

.contact__hint {
  font-size: var(--text-sm);
  color: var(--ink-faint);
}

/* Off-screen rather than display:none — some bots skip what is not rendered. */
.contact__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.contact__status {
  font-size: var(--text-base);
  color: var(--ink-muted);
  margin: 0;
}

.contact__status--error { color: var(--accent); }
.contact__status--sent { color: var(--tip-accent); }

.contact button[disabled] { opacity: 0.6; cursor: progress; }