/* Contact form: every field is a quiet box like the subject chips; labels sit tight on their fields.
   Behaviour: js/components/contact-form.js */
.cform{display:grid;gap:22px;max-width:560px;margin:18px 0 0}
.cform .cl{display:block;font:500 10px/1 var(--m);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:0 0 7px;padding:0}
.cform .cf{display:block}
.crow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform input:not([type=radio]),.cform textarea{display:block;width:100%;font:400 14px/1.4 var(--f);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:2px;padding:10px 12px;outline:none;resize:vertical;transition:border-color .2s}
.cform input:not([type=radio]):hover,.cform textarea:hover{border-color:color-mix(in srgb,var(--ink) 35%,var(--line))}
.cform input:not([type=radio]):focus,.cform textarea:focus{border-color:var(--ink)}
.cform textarea::placeholder{color:var(--mute);opacity:.75}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} /* honeypot: only bots fill it */

/* subject: four equal chips in a 2×2 grid */
.csubj{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.csubj legend{grid-column:1/-1;float:left;width:100%}
.csubj label{display:block;cursor:pointer}
.csubj input{position:absolute;opacity:0;pointer-events:none}
.csubj span{display:block;font:400 13px/1.3 var(--f);color:var(--ink);padding:10px 12px;border:1px solid var(--line);border-radius:2px;transition:background .2s,color .2s,border-color .2s}
.csubj label:hover span{border-color:color-mix(in srgb,var(--ink) 35%,var(--line))}
.csubj input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.csubj input:focus-visible+span{outline:1.5px solid var(--ink);outline-offset:2px}

/* a field left out: a dashed outline in ink until it is filled */
.cform input.miss,.cform textarea.miss,.csubj.miss span{border-style:dashed;border-color:var(--ink)}

/* actions: the button leads, the e-mail is a quiet aside on the same line */
.cact{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:4px}
.cform button{font:500 11px/1 var(--m);letter-spacing:.12em;text-transform:uppercase;padding:13px 28px;border-radius:2px;background:var(--ink);color:var(--bg);transition:opacity .2s}
.cform button:hover{opacity:.85}
.cform button:disabled{opacity:.5}
.cform .cform-alt{margin:0;font:400 11px var(--m);letter-spacing:.04em;color:var(--mute)}
.cform .cform-note{margin:-8px 0 0;font:400 12px var(--m);color:var(--mute)}
.cform .cform-note:empty{display:none}
.cform .cform-legal{margin:-8px 0 0;font:400 11px/1.6 var(--m);letter-spacing:.04em;color:var(--mute)} /* what happens to the message, with the Privacy link */
#cfTurnstile{position:absolute;height:0;overflow:hidden} /* invisible Turnstile takes no row of the form… */
#cfTurnstile.ask{position:static;height:auto} /* …until it asks for a click (js/components/contact-form.js) */

@media (max-width:560px){.crow,.csubj{grid-template-columns:1fr}}