/* Lavender Post: the website is a family photo album. Linen pages, photo corners and tape, handwritten notes,
   dried lavender. Warm and calm. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Caveat:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');
:root{--linen:#f5efe3;--linen2:#ede4d2;--paper:#fffcf5;--ink:#2b2621;--soft:#6e6458;--green:#6b5a92;--green2:#56477a;--sage:#cdc3df;--rose:#c98f86;--blush:#f1ddd6;--kraft:#c8a97e;
  --serif:'Fraunces',Georgia,serif;--hand:'Caveat',cursive;--sans:'Source Sans 3',system-ui,sans-serif;--ease:cubic-bezier(.2,.7,.1,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}html,body{overflow-x:clip}
body{margin:0;color:var(--ink);font:19px/1.65 var(--sans);background:var(--linen);
  background-image:repeating-linear-gradient(0deg,rgba(120,95,60,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(120,95,60,.03) 0 1px,transparent 1px 4px)}
img{max-width:100%;display:block}a{color:var(--green)}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.012em;margin:0 0 .4em}
h1{font-size:clamp(46px,6vw,84px)}h2{font-size:clamp(34px,4.2vw,56px)}h3{font-size:28px;font-weight:500}
h1 em,h2 em{font-style:italic;color:var(--green)}
.hand{font-family:var(--hand);font-weight:600;color:var(--green);font-size:30px;line-height:1.1}
.soft{color:var(--soft)}.lede{font-size:clamp(20px,1.6vw,23px);color:var(--soft);max-width:600px}
/* header */
.top{padding:22px 0 0}.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:italic 500 27px var(--serif)}.logo img{height:48px}
nav{display:flex;gap:24px;align-items:center}nav a{text-decoration:none;color:var(--ink);font-size:16px;font-weight:500}nav a:hover{color:var(--green)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:#fff;text-decoration:none;font:600 17px var(--sans);border:0;border-radius:14px;padding:15px 26px;cursor:pointer;box-shadow:0 10px 24px -14px rgba(58,83,64,.8);transition:transform .25s var(--ease),background .2s}
.btn:hover{background:var(--green2);transform:translateY(-2px)}.btn.soft{background:var(--paper);color:var(--ink);box-shadow:0 0 0 1.5px rgba(43,38,33,.18)}.btn.soft:hover{background:#fff}
.btn.small{padding:11px 18px;font-size:15px;border-radius:12px}
/* photos: prints with white borders, corners and tape */
.print{background:#fff;padding:12px 12px 14px;box-shadow:0 22px 40px -22px rgba(60,40,20,.55),0 2px 6px rgba(60,40,20,.08);position:relative;transition:transform .5s var(--ease)}
.print img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:sepia(.12) saturate(.95)}
.print .note{font:600 24px/1.1 var(--hand);color:#4b4036;text-align:center;margin-top:8px}
.print:hover{transform:rotate(0) scale(1.02)!important}
.tape{position:absolute;width:110px;height:30px;background:rgba(225,210,170,.72);box-shadow:0 1px 2px rgba(0,0,0,.08);top:-14px;left:50%;transform:translateX(-50%) rotate(-3deg)}
.corner{position:absolute;width:30px;height:30px;border:0 solid #3b3530}
.corner.tl{top:-3px;left:-3px;border-top-width:7px;border-left-width:7px}.corner.br{bottom:-3px;right:-3px;border-bottom-width:7px;border-right-width:7px}
.sprig{position:absolute;pointer-events:none;opacity:.9}
/* hero */
.hero{display:grid;grid-template-columns:1fr 1.05fr;gap:50px;align-items:center;padding:56px 0 70px}
.hero .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.album{position:relative;height:560px}
.album .p1{position:absolute;width:54%;left:0;top:96px;transform:rotate(-5deg);z-index:2}
.album .p2{position:absolute;width:46%;right:2%;top:0;transform:rotate(4deg)}
.album .p3{position:absolute;width:36%;right:6%;bottom:-20px;transform:rotate(3deg);z-index:3}
.album .sprig{width:140px;left:40%;bottom:-24px;transform:rotate(-40deg);z-index:4}
/* sections */
section{padding:84px 0}.page{background:var(--paper);border-radius:6px;box-shadow:0 30px 60px -40px rgba(60,40,20,.45);padding:64px}
.center{text-align:center}.center .lede{margin:0 auto}
/* keepsake cards */
.keeps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:44px}
.keep{background:var(--paper);border-radius:10px;padding:22px 22px 26px;box-shadow:0 18px 36px -26px rgba(60,40,20,.5);text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .35s var(--ease)}
.keep:hover{transform:translateY(-6px)}
.keep .vis{aspect-ratio:1;border-radius:8px;background:var(--linen2);display:flex;align-items:center;justify-content:center;margin-bottom:18px;overflow:hidden;position:relative}
.keep h3{font-size:25px;margin-bottom:6px}.keep p{font-size:17px;color:var(--soft);margin:0 0 12px;flex:1}
.keep .go{font:600 16px var(--sans);color:var(--green)}
.badge{display:inline-block;font:700 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:var(--blush);color:#8a4f45;margin-bottom:10px;align-self:flex-start}
.badge.live{background:#dfe8d8;color:var(--green2)}
/* mini book visual */
.minibook{width:62%;aspect-ratio:8.5/11;border-radius:3px 8px 8px 3px;overflow:hidden;box-shadow:6px 10px 18px -8px rgba(40,30,10,.5);transform:rotate(-4deg)}
.minibook img{width:100%;height:100%;object-fit:cover}
/* memory book feature */
.spread{display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:6px;box-shadow:0 40px 70px -40px rgba(60,40,20,.6);position:relative;max-width:820px;margin:0 auto}
.spread:after{content:'';position:absolute;top:0;bottom:0;left:50%;width:60px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(0,0,0,.09) 45%,rgba(0,0,0,.14) 50%,rgba(0,0,0,.09) 55%,transparent);pointer-events:none}
.spread img{width:100%}
.feature{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;margin-top:56px}
/* keepsake card: letterpress stock with a thin lavender double frame and a pressed sprig in the corner */
.recipe{background:#fffdf8 url(/sprig.svg) no-repeat right 22px bottom 20px/46px auto;border-radius:6px;padding:40px 44px 38px;position:relative;transform:none!important;
  box-shadow:0 0 0 1px rgba(107,90,146,.16),0 24px 46px -28px rgba(60,40,20,.5)}
.recipe::before{content:"";position:absolute;inset:10px;border:1px solid rgba(107,90,146,.35);border-radius:3px;box-shadow:inset 0 0 0 3px #fffdf8,inset 0 0 0 4px rgba(107,90,146,.18);pointer-events:none}
.recipe>*{position:relative}
.recipe h3{font:italic 500 32px var(--serif);color:var(--ink);margin:0 0 6px;text-align:center}
.recipe h3::after{content:"";display:block;width:56px;height:1px;background:var(--green);opacity:.5;margin:14px auto 4px}
.recipe .k{font:700 12px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin:20px 0 8px}
.recipe ul,.recipe ol{margin:0;padding:0;list-style:none;font:400 18px/1.5 var(--sans);color:#3d352d}
.recipe li{position:relative;padding:5px 0 5px 32px;border-bottom:1px dotted rgba(107,90,146,.22)}.recipe li:last-child{border-bottom:0}
.recipe ul li::before{content:"";position:absolute;left:4px;top:12px;width:12px;height:7px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.recipe ol{counter-reset:step}.recipe ol li{counter-increment:step}
.recipe ol li::before{content:counter(step);position:absolute;left:0;top:7px;width:22px;height:22px;border-radius:50%;background:var(--sage);color:var(--green2);font:700 12px/22px var(--sans);text-align:center}
/* voice */
.voice{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;max-width:860px;margin:60px auto 0;background:var(--paper);border-radius:16px;padding:28px 34px;box-shadow:0 20px 40px -30px rgba(60,40,20,.5)}
.wave{display:flex;gap:4px;align-items:center;height:60px}.wave i{width:5px;border-radius:3px;background:var(--sage);animation:w 1.4s ease-in-out infinite}
@keyframes w{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.wave i{animation:none}}
/* envelope: the family paper peeking out of a kraft envelope */
.envelope{position:relative;width:min(460px,92%);margin:0 auto;aspect-ratio:1/1}
.envelope .sheet{position:absolute;left:9%;right:9%;top:0;height:64%;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.12);padding:6% 7%;transform:rotate(-2deg);z-index:1}
.envelope .sheet .mh{font:600 clamp(18px,2vw,26px)/1.1 var(--serif);text-align:center;border-top:3px double var(--ink);border-bottom:1.5px solid var(--ink);padding:6px 0;margin-bottom:10px}
.envelope .sheet .ph{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}.envelope .sheet .ph img{aspect-ratio:4/3;object-fit:cover;filter:sepia(.15)}
.envelope .sheet p{font-size:13px;line-height:1.45;color:var(--soft);margin:0}
.envelope .front{position:absolute;left:0;right:0;bottom:0;height:58%;background:#ead9b8;border-radius:6px;z-index:2;box-shadow:0 30px 50px -30px rgba(60,40,20,.65);overflow:hidden}
.envelope .front:before,.envelope .front:after{content:'';position:absolute;top:0;width:50.5%;height:100%;border-top:1.5px solid rgba(150,120,80,.35)}
.envelope .front:before{left:-1%;transform-origin:0 0;transform:skewY(32deg)}.envelope .front:after{right:-1%;transform-origin:100% 0;transform:skewY(-32deg)}
.envelope .addr{position:absolute;left:12%;bottom:16%;font:600 26px/1.25 var(--hand);color:#4b4036;z-index:3}
.envelope .stamp{position:absolute;right:7%;top:12%;width:58px;height:70px;background:#fff;border:3px dotted #d6c39f;display:flex;align-items:center;justify-content:center;z-index:3;transform:rotate(4deg)}
.envelope .postmark{position:absolute;right:22%;top:9%;width:80px;height:80px;border:2px solid rgba(74,102,80,.6);border-radius:50%;font:700 9px/1.25 var(--sans);letter-spacing:.12em;color:rgba(74,102,80,.8);display:flex;align-items:center;justify-content:center;text-align:center;z-index:4;transform:rotate(-14deg)}
/* tags */
.tags{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px}
.tag{background:#fbf3e3;border-radius:6px 16px 16px 6px;padding:26px 26px 26px 44px;position:relative;box-shadow:0 16px 30px -22px rgba(60,40,20,.5)}
.tag:before{content:'';position:absolute;left:16px;top:50%;width:12px;height:12px;border-radius:50%;background:var(--linen);box-shadow:inset 0 0 0 2px var(--kraft);transform:translateY(-50%)}
.tag h3{font-size:24px}.tag p{font-size:17px;color:var(--soft);margin:0 0 14px}
/* letter form */
.letterform{max-width:720px;margin:0 auto;background:#fffdf8;padding:44px 50px;border-radius:4px;box-shadow:0 30px 60px -36px rgba(60,40,20,.55);position:relative}
.letterform .hand{font-size:34px;color:var(--ink)}
.letterform input,.letterform select{font:600 26px var(--hand);color:var(--green2);border:0;border-bottom:1.5px dashed var(--kraft);background:transparent;padding:2px 6px;min-width:0}
.letterform input:focus,.letterform select:focus{outline:0;border-bottom-color:var(--green)}
.letterform .sig{margin-top:18px}
.ok{font:600 30px var(--hand);color:var(--green)}
/* communities band */
.comm{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
/* the fan's height follows its width (pages are 52% wide at 8.5x11), so the pages never spill onto the text below */
.pagesfan{position:relative;height:auto!important;aspect-ratio:10/8;width:100%;max-width:640px;margin:0 auto}.pagesfan img{position:absolute;width:52%;border:1px solid rgba(0,0,0,.08);box-shadow:0 24px 44px -26px rgba(60,40,20,.55)}
.pagesfan img:nth-child(1){left:2%;top:30px;transform:rotate(-6deg)}.pagesfan img:nth-child(2){left:24%;top:0;transform:rotate(1deg);z-index:2}.pagesfan img:nth-child(3){right:0;top:36px;transform:rotate(7deg)}
footer{padding:50px 0 70px;text-align:center;color:var(--soft);font-size:16px}
footer .hand{font-size:34px;color:var(--ink)}
.rv{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease)}.rv.in,html.done .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
@media (max-width:980px){.hero,.feature,.comm{grid-template-columns:1fr}.keeps{grid-template-columns:1fr 1fr}.tags{grid-template-columns:1fr}nav a:not(.btn){display:none}.album{height:460px}.page{padding:36px 24px}section{padding:56px 0}.voice{grid-template-columns:1fr}}
@media (max-width:560px){.wrap{padding:0 18px}.keeps{grid-template-columns:1fr}.album{height:360px}.spread{grid-template-columns:1fr}.spread:after{display:none}.letterform{padding:30px 22px}.letterform input{font-size:22px}}

/* trial form */
.trial label{display:block;margin:16px 0 0;font:600 15px var(--sans);color:var(--soft)}
.trial input,.trial select{display:block;width:100%;margin-top:6px;font:18px var(--sans);padding:12px 14px;border:1.5px solid #e2d8c6;border-radius:12px;background:#fff}
.trial input:focus,.trial select:focus{outline:2px solid var(--sage);border-color:var(--green)}
.trial .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.trial .two{grid-template-columns:1fr}}
.narrow{max-width:760px;margin:0 auto;padding:30px 0 70px}.issues{padding-left:20px}
.form label{display:block;margin:16px 0 0;font:600 15px var(--sans);color:var(--soft)}.form input,.form textarea{display:block;width:100%;margin-top:6px;font:18px var(--sans);padding:12px 14px;border:1.5px solid #e2d8c6;border-radius:12px;background:#fff}
.hl2{font:400 clamp(34px,4vw,50px)/1.1 var(--serif)}.hl3{font:500 26px var(--serif);margin-top:22px}.label{font:600 26px var(--hand);color:var(--green)}.stamp{display:inline-flex;background:var(--green);color:#fff;border:0;border-radius:14px;padding:14px 24px;font:600 17px var(--sans);cursor:pointer;margin-top:18px}
@media (max-width:560px){.album{height:430px}.print .note{font-size:18px}.album .p1{width:55%;top:84px}.album .p2{width:50%;right:0}.album .p3{width:38%;right:4%;bottom:-6px}.album .sprig{width:84px;left:2%;bottom:-14px}.keep .vis{aspect-ratio:16/10}.album .print{padding:8px 8px 10px}}
/* ---- motion: the illustrations play once as they scroll into view, then settle into their resting pose.
   Individual translate/rotate/scale properties stack on each piece's own tilt (its transform) without replacing it. */
:root{--spring:cubic-bezier(.3,1.45,.5,1)}
/* envelope: the family paper rises out, the stamp drops on, the postmark thumps down */
.envelope .stamp{padding:0;border-radius:0;background:#fff;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px rgba(107,90,146,.35)}.envelope .stamp img{width:30px!important;height:auto}
.envelope .postmark{border-color:rgba(107,90,146,.55)!important;color:rgba(107,90,146,.8)!important}
.envelope .sheet{translate:0 62%;transition:translate 1.3s var(--ease) .35s}
.envelope .stamp{translate:0 -40px;opacity:0;transition:translate .7s var(--spring) 1.1s,opacity .4s ease 1.1s}
.envelope .postmark{scale:1.9;rotate:-30deg;opacity:0;transition:scale .55s var(--spring) 1.55s,rotate .55s var(--spring) 1.55s,opacity .2s ease 1.55s}
.rv.in .envelope .sheet{translate:0 0}.rv.in .envelope .stamp{translate:0 0;opacity:1}.rv.in .envelope .postmark{scale:1;rotate:0deg;opacity:1}
.rv.in .envelope:hover .sheet{translate:0 -7%;transition-delay:0s;transition-duration:.6s}
/* page fans: stacked, then fanned out one page after another; hover spreads them wider */
.pagesfan img{transition:translate 1.1s var(--ease),rotate 1.1s var(--ease),scale .5s var(--ease)}
.pagesfan img:nth-child(1){translate:44% 4%;rotate:6deg}.pagesfan img:nth-child(3){translate:-44% 2%;rotate:-7deg}.pagesfan img:nth-child(2){scale:.96}
.pagesfan.in img{translate:0 0;rotate:0deg;scale:1}.pagesfan.in img:nth-child(1){transition-delay:.25s}.pagesfan.in img:nth-child(3){transition-delay:.4s}
.pagesfan.in:hover img:nth-child(1){translate:-5% 2%;rotate:-3deg;transition-delay:0s}.pagesfan.in:hover img:nth-child(3){translate:5% 2%;rotate:3deg;transition-delay:0s}.pagesfan.in:hover img:nth-child(2){translate:0 -12px;scale:1.03}
/* hero album: prints drop onto the page one by one, then the sprig */
.album .print{translate:0 -36px;opacity:0;transition:translate 1s var(--spring),opacity .7s ease,transform .5s var(--ease)}
.album .p1{transition-delay:.15s}.album .p2{transition-delay:.4s}.album .p3{transition-delay:.65s}
.album .sprig{opacity:0;scale:.7;transition:opacity .8s ease 1s,scale 1s var(--spring) 1s}
.album.in .print{translate:0 0;opacity:1}.album.in .sprig{opacity:.9;scale:1}
/* product cards: the little book straightens and lifts */
.minibook{transition:rotate .5s var(--ease),scale .5s var(--ease),box-shadow .5s var(--ease)}.keep:hover .minibook{rotate:4deg;scale:1.06;box-shadow:10px 18px 28px -12px rgba(40,30,10,.5)}
/* the open book: settles open */
.spread{scale:.97;transition:opacity 1s var(--ease),transform 1s var(--ease),scale 1.2s var(--ease)}.spread.in{scale:1}
@media (prefers-reduced-motion:reduce){.envelope .sheet,.envelope .stamp,.envelope .postmark,.pagesfan img,.album .print,.album .sprig,.spread,.minibook{translate:none!important;rotate:none!important;scale:none!important;opacity:1!important;transition:none!important}.album .sprig{opacity:.9!important}}
/* privacy, terms, refunds: a readable column */
.legal{max-width:760px;padding:34px 0 90px}.legal h1{margin:4px 0 6px}.legal h2{font-size:30px;margin:38px 0 10px}.legal p,.legal li{font-size:19px}.legal ul{padding-left:22px}.legal li{margin:8px 0}