/* The Recipe — block «Contact» (Say go) + footer. Form redone from scratch (Nick 19.09 q5 «всё заново»): one sentence the visitor completes,
   four blanks, one tap for the goal. Sends to /api/go (Cloudflare: letter to info@ + a row in D1); if that is not reachable, the visitor's own mail app opens with the same words.
   After sending: our mark assembles + a caption (Nick 17.09). No phones or devices drawn (Nick 19.09). */
.contact{--edge:max(var(--gutter),calc((100vw - 1200px) / 2));position:relative;z-index:2;background:var(--paper);color:var(--ink);
  min-height:100vh;min-height:100svh;padding:clamp(96px,14vh,150px) var(--edge) clamp(64px,10vh,110px);display:grid;align-content:center;gap:clamp(22px,4vh,44px)}
.contact .eyebrow{margin:0;font:700 12px/1 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.contact h2{margin:0;font:800 clamp(52px,9vw,140px)/.9 var(--display);letter-spacing:-.045em}
.contact h2 em{font-style:normal;color:var(--accent)}
.say{margin:0;max-width:1100px;font:700 clamp(24px,3.3vw,48px)/1.42 var(--display);letter-spacing:-.025em;text-wrap:pretty}
.say .blank{display:inline-block;position:relative;vertical-align:baseline}
.say .blank[hidden]{display:none}
.say input{font:inherit;letter-spacing:inherit;color:var(--ink);background:transparent;border:0;border-bottom:3px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:0;padding:0 .08em;margin:0;
  width:var(--w,8ch);min-width:3ch;max-width:min(80vw,100%);outline:none;transition:border-color .25s,background-color .25s;-webkit-appearance:none;appearance:none}
.say input::placeholder{color:color-mix(in srgb,var(--ink) 32%,var(--paper));opacity:1}
.say input:focus{border-bottom-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.say input.ok{border-bottom-color:var(--ink)}
.say input.bad{border-bottom-color:#C2410C;animation:ct-shake .35s}
@keyframes ct-shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.goals{display:inline-flex;flex-wrap:wrap;gap:.3em;vertical-align:baseline}
.goals button{font:inherit;font-size:.72em;letter-spacing:-.02em;line-height:1;padding:.22em .5em .26em;border-radius:999px;border:2px solid color-mix(in srgb,var(--ink) 22%,transparent);background:transparent;color:var(--ink);cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.goals button:hover{border-color:var(--ink)}
.goals button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#12302A;transform:rotate(-2deg)}
.goals.bad button{border-color:#C2410C}
.ct-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.ct-note{margin:0;font:500 15px/1.45 var(--text);color:var(--mute);max-width:40ch}
.ct-note a{color:var(--ink)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* the button: the site's one button shape, ink on paper */
.sendbtn{--bh:clamp(60px,5.4vw,82px);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:calc(var(--bh) * .2);height:var(--bh);
  padding:0 calc(var(--bh) * .11) 0 calc(var(--bh) * .38);border:0;border-radius:999px;background:var(--ink);color:var(--paper);cursor:pointer;
  font:800 calc(var(--bh) * .44)/1 var(--display);letter-spacing:-.02em;white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.08),0 22px 44px -18px rgba(0,0,0,.45);transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .2s}
.sendbtn:hover{transform:translateY(-3px)}
.sendbtn:active{transform:scale(.985)}
.sendbtn[disabled]{opacity:.6;cursor:progress}
.sendbtn .fill{position:absolute;inset:0;z-index:-1;background:var(--accent);clip-path:inset(0 100% 0 0);transition:clip-path .5s cubic-bezier(.7,0,.15,1)}
.sendbtn:hover .fill,.sendbtn:focus-visible .fill{clip-path:inset(0 0 0 0)}
.sendbtn .t{transform:translateY(.04em);transition:color .25s .12s}
.sendbtn:hover .t,.sendbtn:focus-visible .t{color:#12302A}
.sendbtn .go-c{display:grid;place-items:center;width:calc(var(--bh) * .78);aspect-ratio:1;border-radius:50%;background:var(--paper);color:var(--ink);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sendbtn .go-c svg{width:44%;height:44%}
.sendbtn:hover .go-c{transform:translateX(3px)}
.sendbtn:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media (max-width:759px){.say{font-size:clamp(23px,6.6vw,30px);line-height:1.5}.sendbtn{--bh:64px}.contact{padding-bottom:120px}}

/* «sent»: the mark assembles (plate lands gold, letters rise), then the caption */
.sent{position:fixed;inset:0;z-index:120;background:var(--paper);color:var(--ink);display:grid;place-items:center;padding:var(--gutter);opacity:0;transition:opacity .3s}
.sent.on{opacity:1}
.sent-in{display:grid;justify-items:center;gap:clamp(14px,2.4vh,26px);text-align:center}
.sent-mk{width:min(70vw,460px)}
.sent-mk svg{display:block;width:100%;height:auto;overflow:visible}
.sent-mk path{fill:var(--ink);opacity:0;transform-box:fill-box;transform:translateY(.22em)}
.sent.on .sent-mk path{animation:ct-mkup .5s cubic-bezier(.2,.9,.2,1) forwards}
.sent.on .sent-mk path:nth-child(1){animation:ct-mkplate .42s cubic-bezier(.4,0,.2,1) forwards}
.sent.on .sent-mk path:nth-child(2){animation-delay:.34s}
.sent.on .sent-mk path:nth-child(3){animation-delay:.40s}
.sent.on .sent-mk path:nth-child(4){animation-delay:.46s}
.sent.on .sent-mk path:nth-child(5){animation-delay:.52s}
.sent.on .sent-mk path:nth-child(6){animation-delay:.58s}
.sent.on .sent-mk path:nth-child(7){animation-delay:.64s}
@keyframes ct-mkup{to{opacity:1;transform:none}}
@keyframes ct-mkplate{0%{opacity:0;transform:translateY(-.5em) scale(1.08);fill:var(--accent)}55%{opacity:1;fill:var(--accent)}100%{opacity:1;transform:none;fill:var(--ink)}}
.sent-h{margin:0;font:800 clamp(34px,5vw,64px)/1 var(--display);letter-spacing:-.04em;opacity:0}
.sent.on .sent-h{animation:ct-up .6s .82s cubic-bezier(.2,.9,.2,1) forwards}
.sent-s{margin:0;font:500 clamp(15px,1.3vw,18px)/1.45 var(--text);color:var(--mute);max-width:36ch;opacity:0}
.sent.on .sent-s{animation:ct-up .6s .98s cubic-bezier(.2,.9,.2,1) forwards}
.sent-s b{color:var(--ink);font-weight:700}
@keyframes ct-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sent-x{margin-top:6px;border:1px solid var(--line);background:transparent;border-radius:999px;padding:9px 18px;font:600 14px var(--text);color:var(--mute);cursor:pointer;opacity:0}
.sent.on .sent-x{animation:ct-up .5s 1.2s forwards}

/* footer: mark · email · city · legal — one quiet line that wraps on phones */
.foot{position:relative;z-index:2;background:var(--paper);padding:26px max(var(--gutter),calc((100vw - 1200px) / 2)) 96px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;font:500 14px/1.3 var(--text);color:var(--mute)}
.foot .wm{height:22px;margin-right:auto}
.foot .wm svg{display:block;height:100%;width:auto;overflow:visible}
.foot .wm path{fill:var(--ink)}
.foot a{text-decoration:none;color:var(--ink)}
.foot a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
@media (max-width:759px){.foot{gap:10px 18px}.foot .wm{width:100%;margin:0 0 6px}}
@media (prefers-reduced-motion:reduce){.sent *,.say *{animation-duration:0s!important;animation-delay:0s!important}}