/* ulrick.tech · W6 Contact + W7 Book waitlist forms. Thanks/error states work with JS off: the endpoint redirects to
   #<form>-sent or #<form>-error-<state> and :target shows that block (forms.js does the same with .is-shown). */
.form-wrap{margin-top:40px;max-width:40rem}
.form-page .form-wrap{margin-top:32px}
.form{display:grid;gap:22px}
.field{display:grid;gap:8px}
.field label{font-family:var(--font-mono);font-weight:600;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.field input,.field textarea{width:100%;min-width:0;font:inherit;font-size:1.0625rem;color:var(--ink);background:var(--card);
  border:2px solid var(--ink);border-radius:0;padding:14px 16px;line-height:1.4}
.field textarea{resize:vertical;min-height:11rem}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--tezontle);outline-offset:2px}
.field [aria-invalid="true"]{border-color:var(--tezontle)}
.field-error{margin:0;color:var(--tezontle);font-size:.9375rem}
.form .button{border:0;cursor:pointer;font-size:.8125rem}
.form .button[disabled]{opacity:.6;cursor:progress}
.form p{margin:0}
.form--inline .form__row{display:flex;flex-direction:column;gap:0}
.form--inline .button{justify-content:center}
@media (min-width:520px){
  .form--inline .form__row{flex-direction:row}
  .form--inline .form__row input{flex:1 1 auto}
  .form--inline .button{flex:0 0 auto;white-space:nowrap}
}
/* honeypot: off-screen for people and screen readers (aria-hidden + tabindex=-1), still in the DOM for bots */
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-start{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.form-wrap{position:relative}
.form-status{display:none;margin:0 0 22px;padding:16px 18px;border:2px solid var(--ink);background:var(--card)}
.form-status p{margin:0}
.form-status--ok{border-color:var(--ledger)}
.form-status--error{border-color:var(--tezontle)}
.form-status:target,.form-status.is-shown{display:block}
.form-status--ok:target~.form,.form-wrap.is-sent .form{display:none}
.form-wrap.is-sent .form-status:not(.form-status--ok){display:none}
/* W7 Book */
.book-hero h1{font-size:clamp(2.75rem,6vw + 1rem,5.5rem);line-height:.96}
.book-hero__subtitle{margin:14px 0 0;font-size:clamp(1.125rem,1vw + .8rem,1.5rem);font-weight:500;color:var(--slate)}
.book-hero__blurb{margin-top:24px}
.book-hero__cta{margin:0 0 16px;font-size:1.0625rem}
.book-hero .form-wrap{margin-top:36px}
/* W6.1 / W7.1 */
.form-intro{margin:20px 0 0;max-width:40rem}
.form-note{color:var(--slate);font-size:.9375rem}
.form-status ul{margin:0;padding-left:1.2em;display:grid;gap:4px}
/* no-JS field errors: the targeted #<form>-error-fields-... block also marks its inputs (where :has() is supported) */
.form-wrap:has(.form-status--fields:target[id*="-name"]) .field [name="name"],
.form-wrap:has(.form-status--fields:target[id*="-email"]) .field [name="email"],
.form-wrap:has(.form-status--fields:target[id*="-message"]) .field [name="message"]{border-color:var(--tezontle)}
.book-hero__digest{margin:24px 0 0}
/* W6.2: a field the server or forms.js marked invalid (JS off too: the page sets aria-invalid from the flash) */
.field [aria-invalid="true"]{border-color:var(--tezontle)}