/* /contact/: the one contact form, the main way to reach us. Void Deck Playground tokens; 375px first.
   Wide screens put "What happens next" beside the form. */
.contact-page{display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--space-6,32px);max-width:46rem}
.contact-page section{margin:0 0 1.5rem}
.contact-page h2{font-size:1.5rem;margin:0 0 .6rem}
.contact-page p{line-height:1.6}
.contact-form{display:grid;gap:.9rem;margin-top:1rem;padding:1.1rem;border:3px solid var(--outline);border-radius:var(--radius);background:var(--card)}
.contact-form[hidden],.cf-field[hidden],.cf-hint[hidden],.cf-offline[hidden]{display:none}
.cf-field label{display:block;margin:0 0 .35rem;font-weight:700}
.cf-hint{margin:0 0 .35rem;font-size:.92rem;color:var(--muted)}
.cf-field input,.cf-field select,.cf-field textarea{display:block;width:100%;min-height:48px;padding:.7rem;border:2px solid var(--field-border);border-radius:var(--radius-field,12px);background:var(--paper);color:var(--ink);font:inherit;font-size:1rem}
.cf-field textarea{min-height:8rem;resize:vertical;line-height:1.45}
.cf-field select{-webkit-appearance:none;appearance:none;height:auto;line-height:1.4;padding-right:2.5rem;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 1.15rem) 50%,calc(100% - .8rem) 50%;background-size:.35rem .35rem;background-repeat:no-repeat}
.cf-field [aria-invalid=true]{border-color:var(--danger);border-width:3px}
.cf-error{margin:.35rem 0 0;color:var(--danger);font-weight:700;font-size:.95rem}
.cf-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.cf-offline{margin:0;padding:10px 14px;border:2px dashed var(--note-edge,var(--outline));border-radius:14px;font-weight:700}
.cf-notice{margin:0;font-size:.9rem;color:var(--muted);line-height:1.55}
.cf-notice a,.cf-status a,.cf-fallback a,.contact-expect a{color:var(--red-ink);font-weight:700}
.cf-submit{min-height:48px}
.cf-status{margin:0;padding:10px 14px;border:2px solid var(--outline);border-radius:14px;background:var(--paper);font-weight:700}
.cf-status:empty{display:none}
.cf-status:focus{outline:none}
.cf-status:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.cf-fallback{margin-top:1rem;font-weight:700}
.contact-expect{margin:0 0 1.5rem;padding:1.1rem;border:3px solid var(--outline);border-radius:var(--radius);background:var(--card)}
.contact-expect h2{font-size:1.25rem}
.contact-expect dl{margin:0}
.contact-expect dt{margin:.75rem 0 .15rem;font:800 1rem/1.3 var(--font-head)}
.contact-expect dt:first-child{margin-top:0}
.contact-expect dd{margin:0;line-height:1.55}
.contact-page>.note{margin-top:0}
@media(min-width:960px){
  .contact-page{max-width:none;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);grid-template-rows:auto 1fr;align-items:start}
  .contact-main{grid-column:1;grid-row:1/3}
  .contact-expect{grid-column:2;grid-row:1;margin-top:2.6rem}
  .contact-page>.note{grid-column:2;grid-row:2}
}
/* No key on this copy (contact-form.js .is-offline): Send looks as switched off as it is. */
.contact-form.is-offline button[type=submit]{background:var(--soft);color:var(--muted);border-style:dashed;box-shadow:none;cursor:not-allowed;transform:none}