*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

:root {
   --ink: #1a1a2e;
   --ink-light: #4a4a6a;
   --ink-faint: #8888aa;
   --paper: #f8f6f0;
   --paper-warm: #efe9dc;
   --paper-rule: #e2ddd4;
   --accent: #2a5c8a;
   --accent-light: #d6e8f5;
   --accent-warm: #c4813a;
   --green: #2d6a4f;
   --green-light: #d4edde;
   --serif: 'DM Serif Display', Georgia, serif;
   --sans: 'DM Sans', system-ui, sans-serif;
}

html {
   scroll-behavior: smooth;
}

body {
   font-family: var(--sans);
   background: var(--paper);
   color: var(--ink);
   line-height: 1.6;
   overflow-x: hidden;
}

.contact-body {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}
 
.contact-main {
   flex: 1;
   padding: 7rem 2rem 4rem;
   display: flex;
   justify-content: center;
}
 
.contact-container {
   width: 100%;
   max-width: 580px;
}
 
.contact-header {
   text-align: center;
   margin-bottom: 3rem;
}
 
.contact-title {
   font-family: var(--serif);
   font-size: clamp(2.25rem, 5vw, 3rem);
   color: var(--ink);
   margin: 0.75rem 0 1rem;
   line-height: 1.1;
}
 
.contact-title em {
   font-style: italic;
   color: var(--accent);
}
 
.contact-sub {
   color: var(--ink-light);
   font-size: 1rem;
   line-height: 1.6;
   max-width: 480px;
   margin: 0 auto;
}
 
.contact-form-page {
   background: white;
   border: 1px solid var(--paper-rule);
   border-radius: 8px;
   padding: 2rem;
   box-shadow: 0 2px 12px rgba(26, 26, 46, 0.04);
}
 
.contact-field {
   display: flex;
   flex-direction: column;
   margin-bottom: 1.5rem;
   position: relative;
}
 
.contact-field label {
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--ink);
   margin-bottom: 0.5rem;
}
 
.contact-field input,
.contact-field textarea {
   width: 100%;
   padding: 0.75rem;
   border: 1px solid var(--paper-rule);
   border-radius: 4px;
   background: var(--paper);
   color: var(--ink);
   font-family: var(--sans);
   font-size: 16px;
   line-height: 1.5;
   transition: border-color 0.15s, background 0.15s;
}
 
.contact-field input:focus,
.contact-field textarea:focus {
   outline: none;
   border-color: var(--accent);
   background: white;
}
 
.contact-field textarea {
   resize: vertical;
   min-height: 120px;
   font-family: var(--sans);
}
 
.char-count {
   position: absolute;
   bottom: -1.25rem;
   right: 0;
   font-size: 0.75rem;
   color: var(--ink-faint);
}
 
.contact-submit-btn {
   width: 100%;
   padding: 0.95rem;
   background: var(--ink);
   color: var(--paper);
   border: none;
   border-radius: 4px;
   font-family: var(--sans);
   font-size: 1rem;
   font-weight: 500;
   cursor: pointer;
   margin-top: 0.75rem;
   transition: background 0.2s;
}
 
.contact-submit-btn:hover:not(:disabled) {
   background: var(--accent);
}
 
.contact-submit-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
}
 
.contact-status {
   text-align: center;
   margin-top: 1rem;
   font-size: 0.9rem;
   min-height: 1.25rem;
}
 
.contact-status.error {
   color: #9b2c2c;
}
 
.contact-status.success {
   color: var(--green);
}

/* reponsiveness */

@media (max-width: 600px) {
   .contact-main {
      padding: 6rem 1rem 3rem;
   }
   .contact-form-page {
      padding: 1.5rem;
   }
   .input-wrap {
      flex-direction: column;
   }
}