/* Ask Jacob: a card form with an animated send button (idle, preparing, ready). */
.ask-hide,.ask-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ask{--btn:var(--cobalt);max-width:560px;margin:34px auto 0;padding:10px;background:#fff;border-radius:28px;box-shadow:0 1px 0 rgba(0,0,0,.04),0 24px 60px rgba(17,17,17,.12);text-align:left;display:grid;gap:8px}
.ask-topics{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:8px 8px 2px;border:0}
.ask-topics label{cursor:pointer}
.ask-topics input{position:absolute;opacity:0;pointer-events:none}
.ask-topics span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line-light);border-radius:100px;font-size:13px;letter-spacing:.02em;color:var(--muted-light);transition:background .2s,border-color .2s,color .2s}
.ask-topics label:hover span{border-color:var(--cobalt)}
.ask-topics input:checked+span{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.ask-topics input:focus-visible+span{outline:2px solid var(--cobalt);outline-offset:2px}
.ask input[name=name],.ask input[type=email],.ask textarea{width:100%;border:1px solid #e4e3de;border-radius:18px;background:#fafaf8;padding:14px 16px;font:inherit;font-size:16px;color:#111;resize:none;transition:border-color .2s,background .2s}
.ask textarea{min-height:150px}
.ask input[name=name]:focus,.ask input[type=email]:focus,.ask textarea:focus{outline:2px solid transparent;border-color:var(--cobalt);background:#fff;box-shadow:0 0 0 3px rgba(var(--cobalt-rgb),.22)}
.ask [aria-invalid=true]{border-color:#b3261e}
.ask-send{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:52px;width:100%;margin:0;padding:0 22px;border:0;border-radius:100px;background:var(--btn);color:#fff;font:inherit;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;overflow:hidden;transition:transform .2s,box-shadow .25s,background .25s}
.ask-send:hover{box-shadow:0 8px 22px rgba(var(--cobalt-rgb),.4);background:var(--cobalt-hover)}
.ask-send:active{transform:scale(.985)}
.ask-send:focus-visible{outline:2px solid #111;outline-offset:3px}
.ask-send:disabled{cursor:default;pointer-events:none}
.ask-labels{position:relative;display:inline-grid;height:1.2em;overflow:hidden;text-align:center}
.ask-labels span{grid-area:1/1;transition:transform .45s cubic-bezier(.7,0,.2,1),opacity .35s;white-space:nowrap}
.ask-labels .l-busy,.ask-labels .l-done{transform:translateY(120%);opacity:0}
.ask-icon{width:26px;height:26px;overflow:visible;flex-shrink:0}
.ask-icon .env{transform-box:fill-box;transform-origin:50% 60%;transition:transform .5s cubic-bezier(.6,0,.2,1),opacity .3s}
.ask-icon .body{fill:var(--btn);transition:fill .25s}
.ask-send:hover .ask-icon .body{fill:var(--cobalt-hover)}
.ask-icon .paper{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.ask-icon .flap{transform-box:fill-box;transform-origin:50% 0;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.ask-icon .tick{stroke-width:2.4;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.ask-icon .trail{stroke-dasharray:1;stroke-dashoffset:1;opacity:.6}
/* Hover: the envelope opens a little and the letter peeks out. */
.ask-send[data-state=idle]:hover .ask-icon .paper{transform:translateY(-3px)}
.ask-send[data-state=idle]:hover .ask-icon .flap{transform:scaleY(-.75)}
.ask-send[data-state=idle]:hover .ask-icon .env{transform:translateX(2px) rotate(-6deg)}
/* Preparing: the letter drops in, the flap seals, the envelope flies off and leaves a trail. */
.ask-send[data-state=busy] .ask-labels .l-idle{transform:translateY(-120%);opacity:0}
.ask-send[data-state=busy] .ask-labels .l-busy{transform:none;opacity:1}
.ask-send[data-state=busy] .ask-icon .paper{transform:translateY(5px)}
.ask-send[data-state=busy] .ask-icon .env{animation:ask-fly 1s cubic-bezier(.6,0,.3,1) forwards}
.ask-send[data-state=busy] .ask-icon .trail{animation:ask-trail 1s ease-out forwards}
@keyframes ask-fly{0%{transform:none;opacity:1}30%{transform:scale(.88) translateY(1px)}100%{transform:translate(46px,-20px) rotate(-14deg) scale(.7);opacity:0}}
@keyframes ask-trail{0%{stroke-dashoffset:1;opacity:0}35%{opacity:.7}100%{stroke-dashoffset:-1;opacity:0}}
/* Ready: a tick draws where the envelope was. */
.ask-send[data-state=done] .ask-labels .l-idle,.ask-send[data-state=done] .ask-labels .l-busy{transform:translateY(-120%);opacity:0}
.ask-send[data-state=done] .ask-labels .l-done{transform:none;opacity:1}
.ask-send[data-state=done] .ask-icon .env{opacity:0}
.ask-send[data-state=done] .ask-icon .tick{opacity:1;animation:ask-tick .55s .05s cubic-bezier(.5,0,.2,1) forwards}
@keyframes ask-tick{to{stroke-dashoffset:0}}
.ask-status{min-height:0;margin:0;padding:0 14px;font-size:13px;line-height:1.6;color:#555}
.ask-status:not(:empty){padding:6px 14px 10px}
.ask-status a,.ask-status button{color:#111;font:inherit;background:none;border:0;border-bottom:2px solid var(--cobalt);padding:0;cursor:pointer;text-decoration:none}
.ask-status.err{color:#b3261e}
.ask-or{display:block;margin:30px 0 14px;font-size:10px;letter-spacing:.2em;color:#777}
@media(max-width:700px){.ask{margin-top:26px;border-radius:24px}.ask-send{font-size:12px}}
@media(prefers-reduced-motion:reduce){.ask-send[data-state=busy] .ask-icon .env,.ask-send[data-state=busy] .ask-icon .trail,.ask-send[data-state=done] .ask-icon .tick{animation-duration:.01s}.ask-labels span{transition-duration:.01s}}

/* The send scene: plays inside the card. intro = the letter is sealed and flies off; deliver (only after a real
   send) = the pillar box takes it; out = the card comes back. See ask.js. */
.ask{position:relative}
.ask-scene{display:none;position:absolute;inset:0;z-index:5;place-items:center;border-radius:inherit;background:#fff;cursor:pointer}
.ask-scene svg{width:100%;height:100%;overflow:visible}
.ask[data-scene] .ask-scene{display:grid}
.ask[data-scene=intro] .ask-scene{animation:sc-fade .35s both}
.ask[data-scene=out] .ask-scene{opacity:0;transition:opacity .45s;pointer-events:none}
@keyframes sc-fade{from{opacity:0}}
.ask[data-scene]>:not(.ask-scene){opacity:0;filter:blur(8px);transition:opacity .35s,filter .35s}
.ask[data-scene=out]>:not(.ask-scene){opacity:1;filter:none;transition-duration:.45s}
.ask-scene *{transform-box:fill-box}
.sc-fly{transform-box:view-box;transform-origin:0 0;opacity:0;filter:drop-shadow(0 12px 14px rgba(0,0,0,.16))}
.ask[data-scene]:not([data-delivered]) .sc-fly{animation:sc-fly-out 2.6s both}
.ask[data-delivered] .sc-fly{animation:sc-fly-in 1.25s .5s cubic-bezier(.5,0,.3,1) both}
@keyframes sc-fly-out{
 0%{opacity:0;transform:scale(.8);animation-timing-function:cubic-bezier(.2,.8,.3,1)}
 15%{opacity:1;transform:scale(1)}
 81%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.5,0,.25,1)}
 100%{opacity:1;transform:translate(-172px,6px) rotate(-9deg) scale(.2)}}
@keyframes sc-fly-in{
 0%{opacity:1;transform:translate(-172px,6px) rotate(-9deg) scale(.2)}
 62%{opacity:1;transform:translate(0px,-44px) rotate(-3deg) scale(.17)}
 100%{opacity:0;transform:translate(10px,-44px) scale(.16,.02)}}
.sc-paper{transform-box:view-box;transform-origin:0 0}
.ask[data-scene] .sc-paper{animation:sc-paper .7s .45s ease-in-out both}
@keyframes sc-paper{from{transform:translateY(-60px)}to{transform:translateY(62px)}}
.sc-flap-o,.sc-flap-c{transform-origin:50% 0}
.sc-flap-o{transform:scaleY(-1)}
.sc-flap-c{transform:scaleY(0)}
.ask[data-scene] .sc-flap-o{animation:sc-fold-a .3s 1s ease-in both}
.ask[data-scene] .sc-flap-c{animation:sc-fold-b .3s 1.3s ease-out both}
@keyframes sc-fold-a{from{transform:scaleY(-1)}to{transform:scaleY(0)}}
@keyframes sc-fold-b{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.sc-seal{transform-box:view-box;transform-origin:0 0;opacity:0}
.ask[data-scene] .sc-seal{animation:sc-seal .45s 1.65s both}
@keyframes sc-seal{0%{opacity:0;transform:scale(1.9)}55%{opacity:1;transform:scale(.88)}80%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
.sc-box{opacity:0}
.ask[data-delivered] .sc-box{animation:sc-box-in .55s both cubic-bezier(.2,.8,.3,1)}
@keyframes sc-box-in{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
.ask[data-delivered] .sc-pillar{animation:sc-nudge .35s 1.75s both}
@keyframes sc-nudge{40%{transform:translateY(2px)}}
.sc-slotflap{transform-origin:50% 0}
.ask[data-delivered] .sc-slotflap{animation:sc-slotflap 1s 1s both}
@keyframes sc-slotflap{15%,70%{transform:translateY(-3px) scaleY(.4)}}
.sc-glow{opacity:0}
.ask[data-delivered] .sc-glow{animation:sc-glow 1s 1.2s both}
@keyframes sc-glow{15%,75%{opacity:.9}}
.sc-tick circle,.sc-tick path{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.ask[data-delivered] .sc-tick circle{animation:sc-draw .45s 2s both ease-out}
.ask[data-delivered] .sc-tick path{animation:sc-draw .35s 2.3s both ease-out}
@keyframes sc-draw{0%{opacity:0;stroke-dashoffset:1}1%{opacity:1}100%{opacity:1;stroke-dashoffset:0}}
/* After a real send the button stays greyed with the thanks. */
.ask-send[data-state=done][data-sent]{background:#e8e7e2;color:#5f5d55;box-shadow:none;letter-spacing:.06em;text-transform:none;font-size:14px;font-weight:600}
.ask-send[data-state=done][data-sent] .ask-icon{display:none}
@media(prefers-reduced-motion:reduce){.ask-scene{display:none!important}.ask[data-scene]>:not(.ask-scene){opacity:1;filter:none}}