@font-face{font-family:Petcards Hand;src:url('assets/fonts/Caveat.ttf') format('truetype');font-style:normal;font-weight:400 700;font-display:swap}
:root{--hand-font:'Petcards Hand','Bradley Hand',cursive;--stationery-ink:#33283d;--stationery-accent:#df6c25;--stationery-paper:#fffaf0;--stationery-border:url('assets/seasons/stationery-autumn.svg')}
.card-stage[data-occasion='christmas']{--stationery-accent:#9f4246;--stationery-border:none;--stationery-paper:#fcfcf4}
.builder-page .card-stage,.recipient-page .card-stage{padding:14px;border:1px solid #fff9f0;border-radius:18px;background:linear-gradient(135deg,#e8dde8,#f7f0ea);box-shadow:8px 10px 0 #d9cddcc4,0 24px 65px #150c3038;min-height:540px}
.builder-page .greeting,.recipient-page .greeting{position:relative;min-height:0;padding:22px clamp(16px,4vw,40px) 24px;border-radius:12px;color:var(--stationery-ink);background:var(--stationery-border) left top/125px auto no-repeat,var(--stationery-border) right bottom/120px auto no-repeat,radial-gradient(ellipse at 30% 20%,#edc48e20,transparent 60%),var(--stationery-paper);box-shadow:inset 0 0 38px #cfa37416;text-align:center}
.builder-page .greeting-image,.recipient-page .greeting-image{width:82%;max-height:none;margin:12px auto 20px;border:1px solid #cf9b58;border-radius:1px;box-shadow:0 5px 12px #50382b17;object-fit:contain}
.builder-page .recipient-line,.recipient-page .recipient-line{font:600 clamp(1.9rem,3vw,2.8rem)/1.1 var(--hand-font);margin:0 0 16px;overflow-wrap:anywhere}
.recipient-line:not(:empty)::after{content:' ♡';color:var(--stationery-accent)}
.builder-page .greeting-message,.recipient-page .greeting-message{font:400 clamp(1.05rem,1.8vw,1.45rem)/1.5 Georgia,serif;margin:12px 0 18px;white-space:pre-wrap;overflow-wrap:anywhere}
.handwritten-accent{font:600 1.3em/1 var(--hand-font);color:var(--stationery-accent)}
.handwritten-accent.plum{color:#6b477e}
.builder-page .sender-line,.recipient-page .sender-line{margin:20px 0 0;padding-top:18px;border-top:1px solid #b699a4;font:500 clamp(1.55rem,2.6vw,2.25rem)/1.1 var(--hand-font);overflow-wrap:anywhere}
.sender-line small{display:block;margin-bottom:8px;font:600 .62rem/1.2 system-ui;letter-spacing:.3em;text-transform:uppercase}
.sender-line span::after{content:' ♡';color:var(--stationery-accent)}
.builder-page .envelope,.recipient-page .envelope{color:var(--stationery-ink);background:var(--stationery-border) left top/180px auto no-repeat,var(--stationery-border) right bottom/180px auto no-repeat,linear-gradient(140deg,#fff9ec,#f2dfc8);border:10px solid #ede3e9;border-radius:16px;box-shadow:inset 0 0 0 1px #d9b88f}
.builder-page .envelope::before,.recipient-page .envelope::before{background:linear-gradient(140deg,#eed6ba,#fcf0df)}
.builder-page .envelope::after,.recipient-page .envelope::after{background:linear-gradient(220deg,#f5e2c9,#fff8e9)}
.builder-page .envelope-flap,.recipient-page .envelope-flap{height:46%;background:linear-gradient(165deg,#fffaf1,#e9d2b9);filter:drop-shadow(0 2px 2px #76523533)}
.builder-page .envelope-label,.recipient-page .envelope-label{font:600 clamp(2.2rem,4vw,3.4rem)/1.15 var(--hand-font);overflow-wrap:anywhere;text-shadow:0 1px 0 #fff;}
.builder-page .envelope-label::before,.recipient-page .envelope-label::before{content:'♡';display:block;color:var(--stationery-accent);font-size:2.4rem;margin-bottom:14px}
.builder-page .envelope-label span,.recipient-page .envelope-label span{font:500 .7rem/1.6 system-ui;letter-spacing:.08em;max-width:220px;margin:22px auto 0;text-transform:uppercase}
.builder-page .envelope-stamp{border-color:#c09665;color:#9b5937;background:#fff5e5;box-shadow:3px 3px 0 #b9854620}
/* Keep the existing opening animation, with the same ivory stationery outside. */
.experience-page .experience .envelope-address-face{color:var(--stationery-ink);border:10px solid #e9dee7;border-radius:12px;background:var(--stationery-border) left top/160px auto no-repeat,var(--stationery-border) right bottom/130px auto no-repeat,linear-gradient(140deg,#fffaf0,#f7e8d3);box-shadow:8px 10px 0 #d9cddc99,0 25px 50px #160d2938}
.experience-page .experience .envelope-address-face::before{inset:10px;border:1px solid #c6a67a;box-shadow:none}
.experience-page .experience .envelope-address-face::after{display:none}
.experience-page .experience .envelope-address-face strong{font:600 clamp(2.2rem,5vw,3.7rem)/1.1 var(--hand-font);color:var(--stationery-ink);text-shadow:none;overflow-wrap:anywhere}
.experience-page .experience .envelope-delivery-label{color:#946d4c;font:500 .65rem/1.5 system-ui;letter-spacing:.2em}
.experience-page .experience .envelope-postmark{background:#fff4e3;border-color:#c79666;color:#ad643d;box-shadow:none}
.experience-page .experience .envelope-address-line{background:#c58855;box-shadow:none}
.experience-page .experience .inside-page{background:var(--stationery-border) left top/100px auto no-repeat,var(--stationery-border) right bottom/90px auto no-repeat,#fffaf0;color:var(--stationery-ink)}
.experience-page .experience .inside-border{border-color:#c4a589}
.experience-page .experience .inside-recipient{font-family:var(--hand-font);font-size:1.4rem;color:var(--stationery-ink)}
.experience-page .experience .signature strong{font-family:var(--hand-font);color:#694475;font-size:1.4em}
.experience-page .experience[data-occasion='christmas']{--stationery-accent:#a54347;--stationery-border:none}
@media(max-width:560px){.builder-page .greeting,.recipient-page .greeting{padding:20px 14px}.builder-page .greeting-image,.recipient-page .greeting-image{width:90%}.builder-page .card-stage,.recipient-page .card-stage{padding:9px}.builder-page .envelope-label,.recipient-page .envelope-label{padding:14px}.builder-page .envelope-stamp{width:35px;height:42px;right:18px;top:20px}}
.builder-page .card-stage:not(.opened),.recipient-page .card-stage:not(.opened){height:540px}
.builder-page .card-stage:not(.opened) .greeting,.recipient-page .card-stage:not(.opened) .greeting{height:100%;overflow:hidden}
.experience-page .experience .envelope-delivery-label,.experience-page .experience .envelope-address-paw{text-shadow:none;filter:none}
.experience-page .experience .envelope-back,.experience-page .experience .envelope-reverse{background:#ead5ba;border-color:#c3a17c}
.experience-page .experience .envelope-flap{background:linear-gradient(165deg,#fff6e7,#e6c9a7)}
.experience-page .experience .envelope-front-left{background:#efddc5}
.experience-page .experience .envelope-front-right{background:#f7e9d6}
.experience-page .experience .envelope-front-bottom{background:linear-gradient(0deg,#e7cfb1,#fff3e1)}
@media(max-width:560px){.builder-page .card-stage:not(.opened),.recipient-page .card-stage:not(.opened){height:460px;min-height:460px}}
.experience-page .experience .inside-border{justify-content:flex-start;padding:16px 12px;overflow-y:auto;scrollbar-width:thin}
.experience-page .experience .inside-art{display:none}
.experience-page .experience .inside-kicker{font-size:.6rem;letter-spacing:.1em;margin-bottom:8px}
.experience-page .experience .inside-recipient{font-size:1.2rem;line-height:1.1}
.experience-page .experience .message{margin:12px 0;font-size:clamp(.78rem,1.5vw,1.05rem);line-height:1.4;flex-shrink:0}
.experience-page .experience .signature{margin-top:auto;padding-top:8px;font-size:clamp(.7rem,1.2vw,.85rem);flex-shrink:0}
.experience-page .experience .signature strong{font-size:1.2em}
.experience-page .experience .long-message .message{font-size:clamp(.7rem,1.25vw,.88rem)}
