/* Contact — lifted from prototypes/06-chapters/contact.html, the design contract. */

.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);
  align-items:start}
@media (max-width:820px){.wrap{grid-template-columns:1fr}}

.avail{display:inline-flex;align-items:center;gap:.7rem;border:1px solid rgba(176,138,94,.4);
  border-radius:999px;padding:.5rem 1.1rem;margin-bottom:1.6rem}
.avail span{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-lit)}
.avail i{width:.42rem;height:.42rem;border-radius:50%;background:var(--bronze-lit);
  animation:pulse 2.6s var(--e-out-quart) infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

.lead{font-weight:200;text-transform:uppercase;font-size:clamp(1.5rem,3.6vw,2.6rem);
  letter-spacing:-.04em;line-height:1.05;max-width:16ch}
.note{color:#B9B4AA;font-weight:300;margin-top:1.3rem;max-width:44ch}

.links{margin-top:clamp(2rem,6vh,3rem);display:flex;flex-direction:column;gap:1px;
  background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.links a{background:var(--ink);display:flex;justify-content:space-between;align-items:center;
  gap:1rem;padding:1.1rem .2rem;transition:background-color .35s var(--e-out-quart),padding .35s var(--e-out-quart)}
.links a:hover{background:var(--deep);padding-left:1rem;padding-right:1rem}
.links b{font-weight:300;font-size:clamp(1rem,2vw,1.3rem);letter-spacing:-.01em}
.links em{font-style:normal;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.links a:hover em{color:var(--bronze-lit)}

form{background:var(--deep);border:1px solid var(--line);padding:clamp(1.4rem,4vw,2.4rem)}
form h2{font-weight:200;text-transform:uppercase;font-size:clamp(1.2rem,2.6vw,1.8rem);
  letter-spacing:-.03em;line-height:1}
.f{margin-top:1.2rem}
.f label{display:block;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.f input,.f textarea{width:100%;margin-top:.5rem;background:transparent;color:var(--wash);
  border:0;border-bottom:1px solid var(--line-2);padding:.6rem 0;font:inherit;font-weight:300;
  transition:border-color .3s}
.f input:focus,.f textarea:focus{outline:0;border-color:var(--bronze-lit)}
.f textarea{resize:vertical;min-height:6rem}
.err{display:block;color:#E0806A;font-size:.78rem;font-weight:300;margin-top:.4rem;min-height:1.1em}
button.send{margin-top:1.6rem;background:var(--wash);color:var(--ink);border-radius:999px;
  padding:.9rem 2rem;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  transition:background-color .35s var(--e-out-quart),color .35s}
button.send:hover{background:var(--bronze-lit)}
.sent{margin-top:1.2rem;color:var(--bronze-lit);font-weight:300;font-size:.9rem}

/* captcha — styled to sit inside the form rather than bolted on. This is the
   real widget's footprint; drop the provider script in and it slots straight
   into this box. */
.cap-box{margin-top:1.6rem;border:1px solid var(--line-2);background:rgba(23,22,19,.5);
  padding:.9rem 1rem;display:flex;align-items:center;gap:.85rem;cursor:pointer;
  transition:border-color .35s var(--e-out-quart),background-color .35s}
.cap-box:hover{border-color:rgba(237,234,227,.34)}
.cap-box[data-ok]{border-color:rgba(176,138,94,.55)}
.cap-box .tick{width:1.35rem;height:1.35rem;border:1px solid var(--line-2);border-radius:3px;
  display:grid;place-items:center;flex:0 0 auto;color:transparent;font-size:.8rem;
  transition:border-color .3s,color .3s,background-color .3s}
.cap-box[data-ok] .tick{background:var(--bronze-lit);border-color:var(--bronze-lit);color:var(--ink)}
.cap-box .lbl{font-weight:300;font-size:.88rem}
.cap-box .who{margin-left:auto;text-align:right;font-size:.54rem;letter-spacing:.18em;
  text-transform:uppercase;color:#5F5A52;line-height:1.5}
.cap-box .spin{width:1.35rem;height:1.35rem;border:1px solid var(--line-2);
  border-top-color:var(--bronze-lit);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}