/* Clasto — form validation, sending, and success states. Pairs with the form block in site.js. */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.field-err{display:block;margin-top:6px;font-size:12.5px;font-weight:500;color:#B3261E}
.field.has-err input,.field.has-err select,.field.has-err textarea{border-color:#B3261E}
.field.has-err input:focus,.field.has-err select:focus,.field.has-err textarea:focus{border-color:#B3261E}
.newsletter{flex-wrap:wrap}
.newsletter .field-err{flex:1 0 100%;margin-top:2px}
.newsletter .form-status{flex:1 0 100%}
.form-status{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--text-secondary)}
.form-status.is-err{color:#B3261E}
.form-status.is-err a{color:#B3261E;text-decoration:underline}
button[disabled]{opacity:.62;cursor:progress}
/* success panel replaces the form in place */
.form-done{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:start;padding:22px 24px;border:1px solid var(--border);border-left:3px solid var(--amber);border-radius:8px;background:var(--card)}
.form-done:focus{outline:none}
.form-done-tick{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--amber-tint);color:var(--amber-dark);font-size:15px;font-weight:700}
.form-done strong{font-size:16px;font-weight:700;color:var(--text-primary);letter-spacing:-.01em}
.form-done span:not(.form-done-tick){font-size:13.5px;color:var(--text-secondary);line-height:1.6}
.form-done-inline{padding:16px 18px;gap:1px 12px}
.form-done-inline .form-done-tick{width:26px;height:26px;font-size:13px}
.form-done-inline strong{font-size:14.5px}
.form-done-inline span:not(.form-done-tick){font-size:12.5px}
/* on the dark footer band */
footer .field-err,footer .form-status.is-err,footer .form-status.is-err a{color:#F3B0A8}
footer .newsletter.has-err input{border-color:#F3B0A8}
footer .form-done{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);border-left-color:var(--amber)}
footer .form-done strong{color:#fff}
footer .form-done span:not(.form-done-tick){color:#9FB0C6}
footer .form-done-tick{background:rgba(232,146,26,.16);color:var(--amber-light)}