/* Contact form dialog (contact.js). Takes its colours from the page: the
   homepage's green and citron, or the inner pages' wine and blush. */

.cform{
  --cf-ink:var(--ink,#302d28);
  --cf-paper:var(--paper,#fffaf3);
  --cf-accent:var(--wine,var(--accent,#123c35));
  --cf-soft:var(--pink,var(--citron,#f2ded5));
  --cf-line:var(--line,#d9cec2);
  --cf-muted:var(--muted,#655c56);
  --cf-error:#a3261b;
  --cf-radius:0px;
  --cf-pill:0px;
  width:min(1000px,calc(100% - 40px));
  max-width:none;max-height:calc(100% - 40px);
  margin:auto;padding:0;border:0;background:none;color:var(--cf-ink);
  overflow:visible;
}
.cform[data-look=soft]{--cf-radius:22px;--cf-pill:999px}
.cform::backdrop{background:rgba(20,24,22,.55);backdrop-filter:blur(3px)}
html.cform-open{overflow:hidden}

.cform-card{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  max-height:calc(100vh - 40px);overflow:hidden;
  background:var(--cf-paper);border-radius:var(--cf-radius);
  box-shadow:0 30px 80px rgba(0,0,0,.28);
}
@media (min-width:761px){.cform-card{min-height:min(640px,calc(100vh - 40px))}}
.cform[open] .cform-card{animation:cform-in .32s cubic-bezier(.2,.7,.2,1)}
@keyframes cform-in{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}

/* Left panel */
.cform-side{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:52px 44px 44px;
  background:var(--cf-accent);color:var(--cf-paper);
}
.cform-side:after{ /* a quiet stave motif */
  content:'';position:absolute;left:-10%;right:-10%;bottom:118px;height:58px;
  background:repeating-linear-gradient(to bottom,transparent 0 11px,currentColor 11px 12px);
  opacity:.14;transform:rotate(-6deg);pointer-events:none;
}
.cform-eyebrow{margin:0 0 26px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.cform-side h2{
  margin:0 0 22px;font-family:Georgia,'Times New Roman',serif;font-weight:400;
  font-size:clamp(34px,3.6vw,48px);line-height:1.04;letter-spacing:-.04em;color:inherit;
}
.cform-lede{margin:0;font-size:15px;line-height:1.65;opacity:.92;max-width:300px}
.cform-direct{margin:auto 0 0;padding-top:48px;font-size:13px;line-height:1.7;opacity:.9}
.cform-direct a{color:inherit;font-size:15px}

/* Right panel */
.cform-main{position:relative;overflow-y:auto;padding:44px 48px 40px}
.cform-close{
  position:absolute;top:14px;right:14px;width:42px;height:42px;
  display:grid;place-items:center;padding:0;
  font:300 30px/1 Arial,sans-serif;color:var(--cf-ink);
  background:none;border:0;border-radius:50%;cursor:pointer;
}
.cform-close:hover{background:var(--cf-soft)}
.cform form{display:grid;gap:18px}
.cform form[hidden]{display:none}

.cform-topics{margin:0;padding:0;border:0;min-width:0}
.cform-topics legend,.cform-field label{
  display:block;margin:0 0 9px;padding:0;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cf-ink);
}
.cform-chips{display:flex;flex-wrap:wrap;gap:8px;padding-right:36px}
.cform-chip{position:relative;cursor:pointer}
.cform-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.cform-chip span{
  display:inline-block;padding:8px 15px;font-size:13px;line-height:1.3;
  border:1px solid var(--cf-line);border-radius:var(--cf-pill);
  transition:background .15s,border-color .15s;
}
.cform-chip:hover span{border-color:var(--cf-ink)}
.cform-chip input:checked+span{background:var(--cf-soft);border-color:var(--cf-ink)}
.cform-chip input:focus-visible+span{outline:3px solid var(--cf-accent);outline-offset:2px}

.cform-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cform-field{min-width:0}
.cform-optional{font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--cf-muted);margin-left:4px}
.cform input:not([type=radio]),.cform textarea{
  display:block;width:100%;box-sizing:border-box;margin:0;
  padding:12px 14px;font:inherit;font-size:16px;line-height:1.45;color:var(--cf-ink);
  background:#fff;border:1px solid var(--cf-line);
  border-radius:calc(var(--cf-radius) * .45);
  transition:border-color .15s,box-shadow .15s;
}
.cform textarea{resize:vertical;min-height:132px}
.cform input:not([type=radio]):hover,.cform textarea:hover{border-color:var(--cf-muted)}
.cform input:not([type=radio]):focus,.cform textarea:focus{
  outline:none;border-color:var(--cf-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--cf-accent) 22%,transparent);
}
.cform [aria-invalid=true]{border-color:var(--cf-error)!important}
.cform-error{margin:6px 0 0;font-size:13px;line-height:1.4;color:var(--cf-error)}
.cform-error:empty{display:none}

.cform-trap{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform-turnstile:empty{display:none}
.cform-note{margin:0;font-size:12.5px;line-height:1.55;color:var(--cf-muted)}
.cform-note a{color:inherit}

.cform-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.cform-send{
  display:inline-flex;align-items:center;gap:14px;
  padding:14px 26px;font:inherit;font-size:14px;font-weight:600;line-height:1.3;
  color:var(--cf-paper);background:var(--cf-accent);border:1px solid var(--cf-accent);
  border-radius:var(--cf-pill);cursor:pointer;transition:transform .15s,opacity .15s;
}
.cform-send:after{content:'→';font-size:17px;transition:transform .2s}
.cform-plain:after{content:none}
.cform-send:hover:not(:disabled):after{transform:translateX(4px)}
.cform-send:disabled{opacity:.6;cursor:progress}
.cform-send:focus-visible,.cform-close:focus-visible{outline:3px solid var(--cf-accent);outline-offset:3px}
.cform-status{flex:1 1 220px;margin:0;font-size:13.5px;line-height:1.5}
.cform-status.is-error{color:var(--cf-error)}
.cform-status a{color:inherit}

/* Sent */
.cform-done{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:100%;padding:30px 0}
.cform-done[hidden]{display:none}
.cform-done:focus{outline:none}
.cform-done h2{margin:22px 0 14px;font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(34px,4vw,50px);line-height:1.05;letter-spacing:-.04em}
.cform-done p{margin:0 0 30px;font-size:16px;line-height:1.6;max-width:400px}
.cform-tick svg{width:58px;height:58px;fill:none;stroke:var(--cf-accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cform-tick circle{stroke-dasharray:151;stroke-dashoffset:151;animation:cform-draw .6s ease-out forwards}
.cform-tick path{stroke-dasharray:36;stroke-dashoffset:36;animation:cform-draw .35s .45s ease-out forwards}
@keyframes cform-draw{to{stroke-dashoffset:0}}

/* Phones: a full-screen sheet, the green/wine panel becomes a header */
@media (max-width:760px){
  .cform{width:100%;max-height:100%;height:100%;margin:0}
  .cform-card{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:100%;max-height:100vh;max-height:100dvh;border-radius:0}
  .cform-side{padding:26px 20px 22px}
  .cform-side:after,.cform-lede,.cform-direct{display:none}
  .cform-eyebrow{margin-bottom:12px}
  .cform-side h2{font-size:30px;margin:0;padding-right:40px}
  .cform-close{position:fixed;top:14px;right:12px;color:var(--cf-paper)}
  .cform-close:hover{background:rgba(255,255,255,.15)}
  .cform-main{padding:24px 20px calc(28px + env(safe-area-inset-bottom))}
  .cform-chips{padding-right:0}
  .cform-row{grid-template-columns:1fr}
  .cform-send{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .cform[open] .cform-card,.cform-tick circle,.cform-tick path{animation:none;stroke-dashoffset:0}
  .cform-send:after{transition:none}
}