/* ============================================================
   contact.css — Contact page form + details.
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,5vw,76px); align-items:start; margin-top:var(--sp-5); }

.form{ display:grid; gap:22px; }
.field{ display:grid; gap:9px; }
.field label{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); }
.field input,.field textarea,.field select{
  font-family:var(--sans); font-size:16px; color:var(--ink);
  background:var(--paper-raised); border:1px solid var(--rule-strong); border-radius:var(--radius-sm);
  padding:13px 15px; width:100%; transition:border-color var(--dur-quick) var(--ease-standard), background var(--dur-quick) var(--ease-standard);
}
.field textarea{ resize:vertical; min-height:130px; line-height:1.5; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--ink); background:var(--paper); }
.field input::placeholder,.field textarea::placeholder{ color:var(--text-mute); }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form__submit{ display:flex; align-items:center; gap:20px; margin-top:6px; }
.form__note{ font-family:var(--mono); font-size:12px; color:var(--text-mute); }

/* aside */
.contact-aside{ border-left:1px solid var(--rule); padding-left:32px; }
.contact-aside .block{ margin-bottom:34px; }
.contact-aside h3{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sage); font-weight:500; margin-bottom:12px; }
.contact-aside .email{ font-size:var(--fs-h3); font-weight:300; color:var(--ink); border-bottom:1px solid var(--rule-strong); padding-bottom:6px; display:inline-block; }
.contact-aside .email:hover{ border-color:var(--ink); }
.contact-aside p{ color:var(--text-soft); font-size:15.5px; }
.contact-aside li{ display:grid; grid-template-columns:auto 1fr; gap:12px; padding:7px 0; font-size:15px; color:var(--text-soft); }
.contact-aside li .mk{ width:12px; height:12px; margin-top:5px; }
.contact-aside li .mk path{ fill:var(--peri-ink); }

/* Always in flow (never display:none) so its footprint is part of the
   settled layout before submission — no post-submit push of the footer.
   min-height reserves room for the (up to) two-line confirmation copy;
   visibility+opacity hide it pre-submit: visibility keeps it out of the
   a11y tree (so AT users don't land on unsent confirmation text while
   browsing) while opacity/transform carry the reveal animation. */
.form__sent{
  display:block; min-height:3em; margin:0;
  font-family:var(--mono); font-size:13px; line-height:1.5; color:var(--peri-ink); letter-spacing:.02em;
  visibility:hidden; opacity:0;
}
.form.is-sent .form__sent{ visibility:visible; opacity:1; }
/* Failed submit reuses the same reserved slot; recolor so it doesn't read as
   a success confirmation. (contact.js toggles .is-error alongside .is-sent.) */
.form.is-error .form__sent{ color:#b3261e; }
/* visibility is a discrete (non-animatable) property here, so it simply
   flips the moment .is-sent is applied; opacity/transform still animate
   via the keyframe below (same vocabulary as sacer.css's accReveal). */
@media (prefers-reduced-motion:no-preference){
  .form.is-sent .form__sent{
    animation:formSentReveal var(--dur-base) var(--ease-standard) both;
  }
}
@keyframes formSentReveal{
  from{ opacity:0; transform:translateY(var(--move-sm)); }
  to{ opacity:1; transform:translateY(0); }
}

@media (max-width:860px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-aside{ border-left:0; border-top:1px solid var(--rule); padding-left:0; padding-top:32px; }
}
@media (max-width:620px){
  .field--row{ grid-template-columns:1fr; }
  .form__submit{ flex-direction:column; align-items:flex-start; gap:12px; }
  /* pull the form up — the hero meta already carries the email/response,
     so the big stacked whitespace above the form reads as empty */
  .section{ padding-top:var(--sp-4); }
  .contact-grid{ margin-top:var(--sp-3); gap:var(--sp-5); }
  .contact-aside{ padding-top:26px; }
}