/* Connect page — the contact form. Load site.css first.

   Fields carry a subtle raised fill rather than a bare underline. That was
   Design's call and it was kept: on a dark page an underline-only input reads
   as decoration and people miss it. It is the only filled surface on the site,
   and a form is the only place that earns one.

   No page title — content pages carry none. See site.css.

   The form has no handler here. At build time it gets Netlify's two
   attributes and a CSS-hidden honeypot; see CONTEXT.md §8.                  */

.form-wrap{width:100%;max-width:560px;margin:0 auto}

.contact-form{display:grid;gap:var(--s-7)}
.name-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.field{display:grid;gap:14px}
.field label{font:var(--type-label);letter-spacing:var(--track-wide);
             text-transform:uppercase;color:var(--fg-dim)}
.field .control{position:relative}

.field input,
.field textarea{width:100%;font:var(--type-body);color:var(--fg);
                background:var(--bg-raised);
                border:0;border-bottom:1px solid var(--rule);border-radius:0;
                padding:14px 16px;margin:0;outline:none;
                transition:border-color var(--dur) var(--ease)}
.field textarea{display:block;min-height:154px;resize:vertical}
.field input:focus,
.field textarea:focus{border-bottom-color:var(--fg)}

/* Error: brighten the rule, add a dim line beneath. No red — there is no
   accent colour in this brand and an error does not get to invent one. */
.field[data-error] input,
.field[data-error] textarea{border-bottom-color:var(--fg)}
.field .error{font:var(--type-caption-location);color:var(--fg-dim)}

.send{justify-self:start;font:var(--type-label);letter-spacing:var(--track-wide);
      text-transform:uppercase;color:var(--fg);background:var(--bg-raised);
      border:0;border-bottom:1px solid var(--rule);border-radius:0;
      padding:20px 40px;cursor:pointer;transition:var(--transition-opacity)}
.send:hover{opacity:var(--hover-opacity)}
.send:active{opacity:var(--press-opacity)}

/* Honeypot — must be hidden with CSS, not type="hidden", or spam filters
   ignore it. Never remove this rule without removing the field. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.sent{font:var(--type-body);color:var(--fg-dim)}

@media (max-width:700px){
  .contact-form{gap:var(--s-6)}
  .name-row{grid-template-columns:1fr;gap:var(--s-6)}
}