/* contact: a paper-card form, stamped and postmarked */
.post{--bg:var(--sun)}
.desk{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.pcard{position:relative;margin:0;padding:clamp(28px,4vw,52px);padding-top:clamp(40px,5vw,64px);border-radius:10px;rotate:-1deg;
  background:repeating-linear-gradient(180deg,transparent 0 37px,rgba(47,109,168,.14) 37px 39px),var(--tex),var(--cream);
  box-shadow:0 8px 0 rgba(16,30,56,.18),0 40px 50px -24px rgba(16,30,56,.6)}
.pcard::before{content:"";position:absolute;inset:10px;border:3px dashed rgba(242,112,91,.35);border-radius:6px;pointer-events:none}
.pcard h2{font-size:clamp(2.2rem,4.4vw,3.4rem);color:var(--plum);margin:0 0 .6em;max-width:calc(100% - 120px)}
.stamp{position:absolute;top:22px;right:22px;width:clamp(78px,8vw,104px);aspect-ratio:4/5;display:grid;place-items:center;background:var(--terra);rotate:6deg;
  border:6px dotted var(--cream);outline:3px solid var(--terra);box-shadow:var(--cut)}
.stamp .seal{width:70%}
.stamp .seal svg{width:100%;animation:spin 24s linear infinite}
.postmark{position:absolute;top:30px;right:clamp(128px,13vw,156px);font:400 .95rem/1 "Lilita One",sans-serif;color:rgba(20,40,74,.55);
  padding:.7em .5em;border:3px solid rgba(20,40,74,.4);border-radius:50%;rotate:-14deg;pointer-events:none}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fld{margin:0 0 18px}
.fld label{display:block;font:400 1.2rem/1 "Lilita One",sans-serif;color:var(--plum);margin-bottom:8px}
.fld input,.fld select,.fld textarea{width:100%;min-height:52px;padding:.8em 1em;border-radius:14px;border:3px solid #E6D2B4;background:#fff;color:var(--ink);font:500 1.02rem/1.4 Outfit,sans-serif;
  transition:border-color .2s,box-shadow .2s}
.fld textarea{resize:vertical}
.fld :is(input,select,textarea):focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(47,109,168,.25)}
.send{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:6px}
.msg{margin:0;font-weight:600;color:var(--plum)}
.msg:not(:empty){padding:.8em 1.1em;border-radius:14px;background:var(--sun-l);box-shadow:var(--cut);animation:popin .6s var(--spring)}
.side{display:grid;gap:30px}
.side h3{font-size:clamp(1.7rem,2.4vw,2.1rem);color:var(--plum)}
.side .card{rotate:1.2deg}.side .tilt{rotate:-1.5deg;background:var(--tex),var(--sun-l)}
@media (max-width:959px){ .desk{grid-template-columns:1fr;max-width:720px;margin-inline:auto} .side{grid-template-columns:1fr 1fr} }
@media (max-width:599px){ .row2,.side{grid-template-columns:1fr} .pcard h2{max-width:none;margin-top:84px} .postmark{display:none} }
@media (max-height:520px) and (orientation:landscape){ .desk{grid-template-columns:1.5fr 1fr} .side{grid-template-columns:1fr} }