/* Contact postcard popup. Desktop card is 900×600, tilted 3.14°, matching the Figma frame "Contact popup · postcard". */
.postcard{padding:0;border:0;background:transparent;max-width:none;max-height:none;overflow:visible;color:var(--black)}
.postcard::backdrop{background:rgba(20,20,20,.42)}
.postcard[open]{animation:pc-in .35s cubic-bezier(.2,.8,.2,1)}
@keyframes pc-in{from{opacity:0;transform:translateY(24px) rotate(0)}to{opacity:1}}
.postcard .card{position:relative;width:900px;min-height:600px;background:#fbf6ee;border-radius:6px;box-shadow:0 18px 22px rgba(0,0,0,.22);transform:rotate(3.14deg);font-family:var(--body)}
.card-close{position:absolute;top:24px;right:26px;z-index:2;background:none;border:0;padding:4px;margin:-4px;font:500 18px/22px var(--body);color:#6b6357;cursor:pointer}
.card-close:hover{color:var(--black)}
.card-form{display:grid;grid-template-columns:380px 1px 328px;column-gap:47px;padding:52px 48px 48px}
.card-divider{background:#d9cdbb;height:496px}
.card-left{position:relative;display:flex;flex-direction:column}
.card-left .eyebrow{font-size:13px;letter-spacing:.12em}
.card-left h2,.card-sent h2{font-family:var(--heading);font-weight:600;font-variation-settings:"SOFT" 0,"WONK" 1;font-size:34px;line-height:40px;margin:8px 0 0}
/* the note sits on ruled lines, 40px apart, like the card's writing side */
.card-left textarea{display:block;width:100%;height:281px;margin-top:48px;padding:0;border:0;resize:none;background:transparent;font:400 17px/40px var(--body);color:var(--black);
  background-image:linear-gradient(to bottom,transparent 39px,#d9cdbb 39px,#d9cdbb 40px);background-size:100% 40px;background-attachment:local}
.card-left textarea::placeholder{color:#a79c8c}
.card-left textarea:focus{outline:none}
.card-left textarea:focus-visible{box-shadow:0 0 0 2px var(--teal);border-radius:2px}
.alt-email{position:absolute;left:0;bottom:-4px;font-size:14px;line-height:20px;color:#6b6357}
.alt-email a{color:inherit}
.card-right{position:relative;display:flex;flex-direction:column;padding-top:210px}
.postage{position:absolute;inset:0 0 auto 0;height:180px}
.postage .waves{position:absolute;left:42px;top:44px;width:108px}
.postage .ring{position:absolute;left:138px;top:22px;width:92px}
.postage .mark{position:absolute;left:184px;top:55px;transform:translateX(-50%);font:500 11px/13px var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:center;color:var(--black);opacity:.55}
.postage .stamp{position:absolute;right:0;top:0;width:116px;height:140px;background:var(--cream);border:2px dashed var(--terracotta);border-radius:4px;display:grid;place-items:center}
.postage .stamp img{width:86%;height:auto}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:28px}
.field span{font:500 12px/16px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#6b6357}
.field input{border:0;border-bottom:1px solid rgba(20,20,20,.55);background:transparent;padding:0 0 5px;font:400 17px/24px var(--body);color:var(--black);border-radius:0}
.field input::placeholder{color:#c5c2bd}
.field input:focus{outline:none;border-bottom-color:var(--black);box-shadow:0 1px 0 var(--black)}
.btn.send{align-self:flex-end;padding:13px 24px;margin-top:-2px}
.btn.send[disabled]{opacity:.6;cursor:wait}
.card-error{color:#b50500;font-size:14px;line-height:20px;margin:-12px 0 12px}
.card-sent{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;min-height:600px;padding:52px 48px}
.card-sent[hidden]{display:none}
.card-sent p:not(.eyebrow){font-size:18px;line-height:28px;margin:0 0 12px}

/* phones and narrow windows: flat, single column */
@media (max-width:980px){
  .postcard .card{width:min(560px,calc(100vw - 32px));min-height:0;transform:none}
  .card-form{grid-template-columns:1fr;row-gap:28px;padding:44px 24px 28px}
  .card-divider{display:none}
  .card-left textarea{height:201px;margin-top:20px}
  .alt-email{position:static;margin-top:14px}
  .card-right{padding-top:0}
  .postage{display:none}
  .card-left{order:0}
  .card-right{order:1}
  .card-sent{min-height:360px;padding:44px 24px}
  .postcard{max-height:calc(100dvh - 24px);overflow:auto}
}
.card-form[hidden]{display:none}