.contact-page { max-width: 800px; margin: 0 auto; padding: var(--space-7) 0 var(--space-8); }
.contact-heading { max-width: 680px; }
.contact-heading::before { display: block; margin-bottom: var(--space-2); color: var(--interactive); content: "INBOX / NEW MESSAGE"; font: var(--weight-medium) var(--text-xs)/1.5 var(--font-mono); letter-spacing: .04em; }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); padding: var(--space-5); border: var(--line-width) solid var(--border-strong); border-top: var(--line-width-strong) solid var(--accent-brutalist-purple); background: var(--surface); }
.contact-field { display: grid; align-content: start; gap: var(--space-2); min-width: 0; }
.contact-field--wide { grid-column: 1 / -1; }
.contact-field label { color: var(--text-primary); font-weight: var(--weight-bold); }
.contact-field input, .contact-field textarea { width: 100%; min-height: 48px; padding: var(--space-2) var(--space-3); border: var(--line-width) solid var(--border-strong); border-radius: var(--radius-control); background: var(--canvas); color: var(--text-primary); }
.contact-field textarea { min-height: 190px; resize: vertical; }
.contact-field input:focus-visible, .contact-field textarea:focus-visible { border-color: var(--focus-ring); outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.contact-hint { color: var(--text-secondary); font-size: var(--text-sm); }
.contact-errors { grid-column: 1 / -1; padding: var(--space-2) var(--space-3); border-inline-start: var(--line-width-strong) solid var(--state-danger); background: var(--surface-danger); color: var(--state-danger); font-size: var(--text-sm); overflow-wrap: anywhere; }
.contact-errors ul { margin: 0; padding-inline-start: 1.2rem; }
.contact-confirmation { padding-top: var(--space-8); text-align: center; }
.contact-confirmation .page-description { margin: 0 auto var(--space-5); }
.contact-confirmation__mark { display: grid; width: 56px; height: 56px; place-items: center; margin: 0 auto var(--space-4); border: var(--line-width-strong) solid var(--state-success); background: var(--surface-success); color: var(--state-success); font: var(--weight-bold) var(--text-xl)/1 var(--font-mono); }

@media (max-width: 600px) {
  .contact-page { padding: var(--space-6) 0 var(--space-7); }
  .contact-form { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); }
  .contact-field--wide { grid-column: auto; }
  .contact-actions { align-items: stretch; flex-direction: column; }
  .contact-actions .button-primary { width: 100%; }
  .contact-confirmation { padding-top: var(--space-7); }
}