:root{--bg:#fbf6f2;--fg:#2c3a34;--muted:#5f6f67;--primary:#5eaa78;--mint:#c8ebd4;--blush:#f3c4d0;--lav:#c9b6e4;--surface:#fffdfa;--yellow:#fff2a8;--hand:"Caveat","Marck Script",cursive}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--fg);font:16px/1.6 "Manrope",system-ui,sans-serif;background-color:#f3e6d3;
 background-image:radial-gradient(rgba(120,90,50,.07) 1px,transparent 1.4px),radial-gradient(rgba(120,90,50,.05) 1px,transparent 1.4px);background-size:22px 22px,13px 13px;background-position:0 0,7px 9px;overflow-x:hidden}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px;position:relative}
.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:10px 18px;background:rgba(251,246,242,.92);backdrop-filter:blur(6px);border-bottom:1px dashed #d8c7b2}
.back{color:var(--fg);font-weight:700;text-decoration:none}.back:hover{color:var(--primary)}
.btn{display:inline-block;background:var(--primary);color:#f7fff9;font-weight:800;text-decoration:none;padding:15px 24px;border-radius:999px;box-shadow:0 6px 0 #3f8a5a;transition:transform .15s}.btn:hover{transform:translateY(-2px)}.btn.sm{padding:8px 14px;font-size:14px;box-shadow:0 3px 0 #3f8a5a}
.hand{font-family:var(--hand);font-weight:700;line-height:1.1;margin:0 0 10px}.big{font-size:44px}.big span{font-size:.6em;color:var(--muted)}
.muted{color:var(--muted)}.center{text-align:center}
/* hero */
.hero{display:grid;gap:28px;padding-top:34px;padding-bottom:30px}
.hero-photo{max-width:300px;margin:12px auto 0}
.kicker{font-size:28px;color:var(--primary);margin:0}
h1{font-family:var(--hand);font-size:58px;line-height:1;margin:0}
.write span{display:inline-block;clip-path:inset(0 100% 0 0);transition:clip-path 1.6s steps(24,end) .2s}.write.in span{clip-path:inset(0 0 0 0)}
.h1sub{font-family:var(--hand);font-size:32px;margin:0 0 12px;color:var(--muted)}
.lead{font-size:17px;max-width:34em}
.facts{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:14px}
.note{padding:12px 14px;font-weight:700;box-shadow:2px 4px 10px rgba(80,50,20,.15);font-size:15px;line-height:1.3}.note span{font-weight:500;color:var(--muted)}
.n-yellow{background:var(--yellow)}.n-mint{background:var(--mint)}.n-pink{background:var(--blush)}
.r-3{--r:-3deg}.r-2{--r:-2deg}.r-1{--r:-1.2deg}.r1{--r:1.2deg}.r2{--r:2deg}
.note,.paper,.sticky,.hero-photo{transform:rotate(var(--r,0))}
/* pixel blocks & doodles */
.px{position:absolute;width:26px;height:26px;pointer-events:none;image-rendering:pixelated;box-shadow:inset -5px -5px 0 rgba(0,0,0,.18),inset 5px 5px 0 rgba(255,255,255,.25)}
.px1{background:#7ebf8e;top:18px;right:8%;border-top:8px solid #5eaa78}.px2{background:#a0703c;bottom:20px;left:4%;width:20px;height:20px}.px3{background:#8fd3e8;top:46%;right:2%;width:18px;height:18px}
.doodle{position:absolute;width:34px;height:34px;pointer-events:none}.star{fill:#f5b301;top:8px;left:6%}.heart{fill:#e8a0b4;bottom:6px;right:16%}
/* polaroid & tape */
.polaroid{position:relative;background:#fff;padding:10px 10px 0;box-shadow:0 8px 18px rgba(70,45,20,.22);transform:rotate(var(--r,0));transition:transform .3s cubic-bezier(.2,.8,.3,1.3),box-shadow .3s;margin:0}
.polaroid img,.polaroid .ph{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#eee6da}
.polaroid .ph{display:grid;place-items:center;color:#b8a78f;background:repeating-linear-gradient(45deg,#efe6d8 0 10px,#e9dfcf 10px 20px)}.ph svg{width:36%;height:36%}
.cap{font-family:var(--hand);font-size:22px;text-align:center;margin:0;padding:6px 4px 10px;color:#3d3a35}
.polaroid:hover,.polaroid:focus{transform:rotate(0) scale(1.06) translateY(-4px)!important;box-shadow:0 18px 34px rgba(70,45,20,.3);z-index:5;outline:none}
.tape{position:absolute;top:-12px;left:50%;width:96px;height:24px;margin-left:-48px;opacity:.85;transform:rotate(-4deg) scaleX(1);transform-origin:left;z-index:2;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.t1{background:repeating-linear-gradient(90deg,rgba(243,196,208,.9) 0 8px,rgba(255,255,255,.6) 8px 12px)}
.t2{background:repeating-linear-gradient(45deg,rgba(200,235,212,.95) 0 6px,rgba(126,191,142,.7) 6px 12px)}
.t3{background:linear-gradient(rgba(201,182,228,.9),rgba(201,182,228,.75));background-image:radial-gradient(#fff 1.5px,transparent 2px),linear-gradient(rgba(201,182,228,.9),rgba(201,182,228,.8));background-size:8px 8px,auto}
/* paper */
.two{display:grid;gap:30px;margin:24px auto}
.paper{position:relative;background:var(--surface);padding:30px 22px 24px;box-shadow:0 6px 16px rgba(70,45,20,.15);margin-bottom:26px}
.paper h2{font-size:34px}
.torn{padding-bottom:34px}.torn:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;background:linear-gradient(135deg,var(--surface) 33%,transparent 34%) 0 0/14px 10px repeat-x,linear-gradient(225deg,var(--surface) 33%,transparent 34%) 0 0/14px 10px repeat-x}
.lined{background:repeating-linear-gradient(#fffdfa 0 27px,#cfe0ec 27px 28px);background-position:0 14px;border-left:3px solid #f1a5a5}
.ticks{padding:0;margin:0;list-style:none}.ticks li{padding-left:28px;position:relative;margin-bottom:10px}.ticks li:before{content:"✔";position:absolute;left:0;color:var(--primary);font-weight:800}
.todo{background:#ffe8e8;border:2px dashed #e85d5d;color:#b33;padding:8px 10px;font-weight:700;font-size:14px}
/* collage */
.gallery-sec{padding:20px 0 10px}
.collage{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 14px;padding-top:18px;padding-bottom:20px}
.collage .cap{font-size:19px}
@media(min-width:760px){.collage{grid-template-columns:repeat(4,1fr);gap:8px}.collage .polaroid{margin:-6px}.collage .wide{grid-column:span 2}.collage .polaroid:nth-child(3n){margin-top:22px}}
@media(min-width:1100px){.collage{grid-template-columns:repeat(5,1fr)}}
/* quotes */
.quotes{padding:30px 18px}.notes{display:grid;gap:22px;margin:16px 0}
.sticky{margin:0;padding:22px 20px 18px;box-shadow:3px 8px 16px rgba(80,50,20,.18);position:relative}
.sticky:before{content:"";position:absolute;top:-10px;left:42%;width:70px;height:20px;background:rgba(255,255,255,.55);transform:rotate(3deg)}
.sticky p{font-family:var(--hand);font-size:25px;line-height:1.2;margin:0 0 10px}.sticky cite{font-style:normal;font-weight:700}
.link{color:var(--primary);font-weight:800;font-size:18px}
.cta{text-align:center;margin:20px auto 40px;max-width:760px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-bottom:30px;color:var(--muted);font-size:14px}
@media(min-width:900px){.hero{grid-template-columns:380px 1fr;align-items:center;padding-top:60px}.hero-photo{max-width:none}h1{font-size:88px}.h1sub{font-size:42px}.two{grid-template-columns:1fr 1fr}.notes{grid-template-columns:repeat(3,1fr)}.big{font-size:56px}}
/* ---------- animations (transform/opacity only) ---------- */
@media (prefers-reduced-motion:no-preference){
 .drop{opacity:0;transform:translateY(-60px) rotate(calc(var(--r,0deg) * -2.5))}
 .drop.in{animation:drop .8s cubic-bezier(.3,1.4,.5,1) var(--d,0ms) forwards}
 @keyframes drop{0%{opacity:0;transform:translateY(-60px) rotate(calc(var(--r,0deg) * -2.5))}60%{opacity:1;transform:translateY(6px) rotate(var(--r,0deg))}80%{transform:translateY(-3px) rotate(var(--r,0deg))}100%{opacity:1;transform:translateY(0) rotate(var(--r,0deg))}}
 .tape{transform:rotate(-4deg) scaleX(0);transition:transform .5s ease-out .5s}.tape.in{transform:rotate(-4deg) scaleX(1)}
 .slide{opacity:0;transform:translateY(30px) rotate(var(--r,0));transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.3,1)}.slide.in{opacity:1;transform:translateY(0) rotate(var(--r,0))}
 .pop{opacity:0;transform:scale(.6) rotate(var(--r,0));transition:opacity .4s,transform .5s cubic-bezier(.3,1.6,.5,1)}.pop.in{opacity:1;transform:scale(1) rotate(var(--r,0))}
 .facts .pop:nth-child(2){transition-delay:.15s}.facts .pop:nth-child(3){transition-delay:.3s}
 .notes .slide:nth-child(2){transition-delay:.15s}.notes .slide:nth-child(3){transition-delay:.3s}
 .float{animation:float 4s ease-in-out infinite}.px2{animation-delay:-1.3s}.px3{animation-delay:-2.6s}
 @keyframes float{50%{transform:translateY(-10px) rotate(8deg)}}
 .wobble{animation:wob 3s ease-in-out infinite}@keyframes wob{50%{transform:rotate(14deg) scale(1.1)}}
 .bounce{animation:bnc 1.8s ease-in-out infinite}@keyframes bnc{50%{transform:translateY(-8px) scale(1.08)}}
}
@media (prefers-reduced-motion:reduce){.write span{clip-path:none;transition:none}}
.stick{list-style:none;padding:0;margin:0}.stick li{display:flex;gap:12px;align-items:center;margin:0 0 14px}
.stk{flex:0 0 44px;height:44px;display:grid;place-items:center;font-size:22px;background:var(--yellow);border-radius:50%;box-shadow:1px 3px 6px rgba(80,50,20,.18);transform:rotate(-8deg)}
.stick li:nth-child(2n) .stk{background:var(--mint);transform:rotate(7deg)}
.path{list-style:none;padding:0 0 0 26px;margin:0;position:relative}.path:before{content:"";position:absolute;left:9px;top:6px;bottom:6px;border-left:3px dashed var(--primary)}
.path li{position:relative;margin:0 0 16px}.path li:before{content:"";position:absolute;left:-24px;top:5px;width:14px;height:14px;background:#7ebf8e;box-shadow:inset -3px -3px 0 rgba(0,0,0,.2)}
.path li:last-child:before{background:#f5b301}.path b{display:block}.path span{color:var(--muted);font-size:14px}
@media (prefers-reduced-motion:no-preference){.stk{animation:wob 3.5s ease-in-out infinite}.stick li:nth-child(2n) .stk{animation-delay:-1.7s}}
.ski{font-size:26px;color:#3f6fb0;margin:14px 0 0;transform:rotate(-2deg);display:inline-block;background:#e3f0ff;padding:6px 12px;box-shadow:1px 3px 6px rgba(80,50,20,.15)}

.collage .polaroid img{aspect-ratio:3/4;object-position:50% 40%}
.vidcard{max-width:440px;margin:10px auto 30px}.vidcard video{display:block;width:100%;aspect-ratio:9/16;background:#222;border-radius:4px}
/* smaller hero photo v2 (24.10) */
.hero-photo{width:200px!important;max-width:200px!important;margin:8px auto 0!important}
.hero-photo img{width:100%!important;height:auto!important;aspect-ratio:1/1!important;object-fit:cover!important;object-position:50% 30%}
@media(min-width:900px){.hero{grid-template-columns:280px 1fr}.hero-photo{width:260px!important;max-width:260px!important}}
/* fix 24.10 b: polaroid bottom + h1 clip */
.hero-photo.polaroid{padding:10px 10px 44px!important;background:#fff!important;box-sizing:border-box}
h1{padding-right:.25em;overflow:visible;font-size:clamp(40px,11vw,58px)}
@media(min-width:900px){h1{font-size:88px}}
.write span{padding-right:.3em;margin-right:-.3em}.write.in span{clip-path:inset(-20% -30% -20% 0)}
/* 24.10 c */
.now2 li{display:flex!important;align-items:center;gap:14px;grid-template-columns:none!important}
.now2 li>div{display:flex;flex-direction:column;line-height:1.15}
.now2 b.hand{font-family:var(--hand);font-weight:400;font-size:28px}
.now2 small{font-size:15px;color:var(--muted);margin-top:2px}
.num{font-size:1.6em;color:#2e8b57;font-weight:800}
h2.hand{font-size:clamp(30px,8.5vw,44px);padding-right:.2em}
/* Unbounded for non-handwritten text 24.10 */
body,button,input,a,p,li,span,small,b,cite,.btn{font-family:"Unbounded",system-ui,sans-serif}
body{font-weight:300;letter-spacing:-.01em}
p,li{font-size:.92em}
.hand,.hand *,h1,h1 *,.h1sub,.cap,.sticky p,.write span,.ski{font-family:var(--hand)!important}

/* v11 review button, cta plate */
.paper p{margin:0 0 12px}
.ybtn{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:12px 20px;border:2px solid #2c3a34;border-radius:999px;background:#fffdfa;color:var(--fg);text-decoration:none;font-weight:500;font-size:15px;line-height:1.3;text-align:left;box-shadow:3px 4px 0 #2c3a34;transition:transform .15s,box-shadow .15s,background .15s}
.ybtn:hover{background:var(--yellow);transform:translate(-1px,-2px);box-shadow:5px 6px 0 #2c3a34}.ybtn:active{transform:translate(3px,4px);box-shadow:0 0 0 #2c3a34}
.ystar{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;background:var(--yellow);border-radius:50%;font-size:18px}
.cta-lead{font-size:20px!important;font-weight:500;margin:6px 0 18px}
.infoplate{position:relative;margin:30px auto 6px;max-width:520px;padding:14px 16px 14px 46px;border:2px dashed #7ebf8e;border-radius:14px;background:#f2faf4;text-align:left}
.infoplate p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55}
.ibadge{position:absolute;left:-16px;top:50%;margin-top:-18px;width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font:700 italic 20px/1 Georgia,serif!important;box-shadow:0 3px 0 #3f8a5a}
.quotes .center{padding:4px 6px 10px}
.cicon{position:absolute;top:16px;right:14px;width:60px;height:60px;transform:rotate(-8deg);pointer-events:none;overflow:visible}
.paper:has(>.cicon)>h2{padding-right:64px}