/* Paper things in the box: postcard (--pw) and ticket (--tw), plus the house sign and the dot-font price. */

/* ---------- postcard, lying on the opened envelope it came in ---------- */
.postcard{--pw:200px;position:relative;width:var(--pw);height:calc(var(--pw) * .66);color:var(--pen)}
.postcard.big{--pw:min(92vw,460px)}
.pc-envelope{position:absolute;left:8%;top:16%;width:94%;aspect-ratio:100/70;transform:rotate(5deg);transform-origin:30% 70%;filter:drop-shadow(2px 5px 7px rgba(0,0,0,.35))}
.pc-envelope svg{position:absolute;left:0;top:calc(-40 / 70 * 100%);width:100%;height:calc(110 / 70 * 100%);display:block}
.pc-card{position:absolute;inset:0;display:grid;grid-template-columns:68% 32%;padding:calc(var(--pw) * .03);border:calc(var(--pw) * .028) solid transparent;
  background:var(--grain-soft) padding-box,linear-gradient(#f6f2ea,#efe9dd) padding-box,
    repeating-linear-gradient(-45deg,#b9473c 0 calc(var(--pw) * .022),#f6f2ea calc(var(--pw) * .022) calc(var(--pw) * .044)) border-box;
  box-shadow:3px 5px 12px rgba(0,0,0,.4)}   /* red and white airmail stripes round the edge; the inside as before */
.pc-msg{position:relative;padding:calc(var(--pw) * .02) calc(var(--pw) * .035) 0 calc(var(--pw) * .015);border-right:1px solid rgba(40,40,60,.35);overflow:hidden}
.pc-msg p,.pc-msg textarea{margin:0;white-space:pre-wrap;word-break:break-word;font:400 calc(var(--pw) * .082 * var(--fk,1))/1.38 var(--pcf);color:var(--pen)}
.pc-side{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:calc(var(--pw) * .01);padding:0 0 calc(var(--pw) * .03) calc(var(--pw) * .045)}
.pc-stamp{position:relative;flex:none;align-self:flex-end;margin-bottom:auto;width:calc(var(--pw) * .145);aspect-ratio:84/104;transform:rotate(2deg);filter:drop-shadow(0 1px 1.5px rgba(40,20,10,.35))}
.pc-stamp svg{display:block;width:100%;height:100%}
.pc-line{display:flex;align-items:flex-end;gap:5px;min-height:calc(var(--pw) * .1);border-bottom:1px solid rgba(40,40,60,.35);overflow:hidden}
.pc-line span{flex:none;font:400 calc(var(--pw) * .036)/1.4 var(--thai);color:#6b6d80}
.pc-line b,.pc-line input{flex:1;min-width:0;height:1.3em;padding:0;-webkit-appearance:none;appearance:none;border-radius:0;font:400 calc(var(--pw) * .07 * var(--nk,1))/1.2 var(--pcf);color:var(--pen);white-space:nowrap;overflow:hidden}

/* ---------- the memory photobooth: photos under her frame (class .ticket kept for its size hooks: --tw = width) ---------- */
.ticket.booth{--tw:96px;position:relative;width:var(--tw);height:calc(var(--tw) * 1.25);overflow:hidden;background:#0d0b0a;color:#fff;
  box-shadow:0 calc(var(--tw) * .03) calc(var(--tw) * .06) rgba(0,0,0,.55);border-radius:calc(var(--tw) * .008)}
.ticket.booth.big{--tw:min(76vw,340px)}
.pb-photos,.pb-frame{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}
.pb-frame{z-index:2}
.pb-slot{position:absolute;z-index:1;overflow:hidden}
.pb-side{position:absolute;z-index:3;right:4.6%;top:6.5%;height:62%;writing-mode:vertical-rl;display:flex;align-items:center;justify-content:space-between;
  font:900 calc(var(--tw) * .056)/1 "Kanit",sans-serif;letter-spacing:.2em;color:#fff;white-space:nowrap}   /* the brand down the right edge, spaced out to reach her red mark */
.pb-foot{position:absolute;z-index:3;left:5.5%;bottom:2.6%;font:400 calc(var(--tw) * .036)/1 "Bodoni Moda",Georgia,serif;letter-spacing:.05em;color:#f3ead8;white-space:nowrap}

/* ---------- house sign: dot-matrix name with a script line across it ---------- */
.ftr-sign{display:inline-flex;flex-direction:column;align-items:center;line-height:1;color:var(--sg,#fff8ee);white-space:nowrap}
.ftr-sign b{font:900 1em/1 var(--dot);font-variation-settings:"ROND" 100;letter-spacing:.06em;-webkit-text-stroke:.035em currentColor}
.ftr-sign i{position:relative;margin-top:-.36em;font:400 1.12em/1 var(--script);font-style:normal;letter-spacing:.01em}
.ftr-sign.foil{--sg:#e6c27a;filter:drop-shadow(0 1px 0 rgba(8,20,13,.6))}

/* ---------- price in the dot font, ฿ drawn as a dotted B with its own stroke ---------- */
.dprice{display:inline-flex;align-items:baseline;gap:.14em;font-family:var(--dot);font-variation-settings:"ROND" 100;-webkit-text-stroke:.03em currentColor}
.dprice .baht{position:relative}
.dprice .baht::after{content:"";position:absolute;left:42%;top:-.2em;bottom:-.14em;width:.13em;margin-left:-.065em;
  background:radial-gradient(circle,currentColor 42%,transparent 46%) 50% 0/.13em .13em repeat-y}