/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-main {
  padding-top: calc(var(--space-3xl) + 2rem);
  padding-bottom: var(--space-2xl);
  min-height: 100vh;
}

.contact-main .container {
  max-width: 560px;
}

.contact-content h1 {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: var(--text-3xl);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: var(--space-sm);
}

.contact-content > p {
  color: var(--text-muted);
  font-size: var(--text-base);
  margin-bottom: var(--space-lg);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.contact-field label {
  font-family: 'Merriweather Sans', sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
}

.contact-field .field-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 0.25rem;
}

.contact-field input,
.contact-field textarea {
  font-family: 'Merriweather Sans', sans-serif;
  font-size: var(--text-base);
  color: var(--text);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.625rem 0.75rem;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 12%, transparent);
}

.contact-field textarea {
  resize: vertical;
  min-height: 8rem;
  line-height: 1.5;
}

.contact-field .field-error {
  font-size: var(--text-xs);
  color: var(--accent-error, #b34a4a);
  min-height: 1em;
}

.contact-turnstile {
  margin-top: 0.25rem;
}

.contact-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.contact-submit {
  font-family: 'Merriweather Sans', sans-serif;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--bg);
  background: var(--text);
  border: none;
  border-radius: 6px;
  padding: 0.625rem 1.25rem;
  cursor: pointer;
  transition: opacity 120ms ease, transform 120ms ease;
}

.contact-submit:hover:not(:disabled) {
  transform: translateY(-1px);
}

.contact-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.contact-status {
  font-family: 'Merriweather Sans', sans-serif;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.contact-status[data-state="success"] {
  color: var(--accent-success, #2f7a4a);
}

.contact-status[data-state="error"] {
  color: var(--accent-error, #b34a4a);
}

.contact-fallback {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.contact-fallback p {
  margin: 0;
}

@media (max-width: 768px) {
  .contact-content h1 {
    font-size: var(--text-2xl);
  }
}