/* Page layout layered over the shared CRBL Atelier stylesheet in crbl.css. */
* { box-sizing: border-box; }
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-size: 1rem;
}
main {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: var(--space-4xl) var(--space-lg) var(--space-2xl);
}
.intro { text-align: center; margin-bottom: var(--space-xl); }
.eyebrow {
  margin: 0 0 var(--space-md);
  color: var(--color-accent-darker);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
h1 { margin: 0 0 var(--space-lg); font-size: 3rem; overflow-wrap: anywhere; }
.description { margin: 0; font-size: 1.125rem; color: var(--color-text-muted); }
.contact { padding: var(--space-xl); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.field { min-width: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.field-message { grid-column: 1 / -1; }
label { font-size: .875rem; line-height: 1.5; }
.input { font-size: 1rem; line-height: 1.6; padding: 12px 16px; }
textarea { min-height: 160px; resize: vertical; }
.btn { justify-content: center; max-width: 100%; margin-top: var(--space-lg); font-size: .75rem; line-height: 1.5; }
.btn:disabled { cursor: wait; }
.btn:focus-visible { outline: 2px solid var(--color-accent-darker); outline-offset: 4px; }
.form-status { margin: var(--space-md) 0 0; font-size: .875rem; line-height: 1.6; }
.form-status:empty { margin: 0; }
.form-status[data-state='sending'] { color: var(--color-text-muted); }
.form-status[data-state='success'] { background: var(--color-success-bg); padding: var(--space-md); }
.form-status[data-state='error'] { color: var(--color-error); background: var(--color-error-bg); padding: var(--space-md); }
@media (max-width: 540px) {
  main { padding-top: var(--space-2xl); }
  .contact { padding: var(--space-lg); }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .btn-primary:active { transform: none; }
}