:root{--ink:#1b1b1b;--paper:#fbf7ec;--line:#cfe0ef;--red:#e8584a}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:'Patrick Hand',cursive;font-size:19px;background:#d9cdb4 repeating-linear-gradient(45deg,#d6c9ae 0 2px,#dccfb6 2px 6px)}
body>*{max-width:1100px;margin-left:auto;margin-right:auto}
main{background:var(--paper);background-image:linear-gradient(90deg,transparent 70px,#f1a9a0 70px 72px,transparent 72px),repeating-linear-gradient(var(--paper) 0 31px,var(--line) 31px 32px),radial-gradient(#0000000a 1px,transparent 1px);background-size:auto,auto,4px 4px;padding:30px 30px 40px 100px;box-shadow:0 2px 0 #eee8d8,0 4px 0 #e2dac6,0 6px 0 #d5ccb5,0 14px 30px #0004;border-radius:2px 6px 6px 2px;position:relative}
main:before{content:'';position:absolute;left:18px;top:20px;bottom:20px;width:22px;background:radial-gradient(circle,#9b8f78 6px,transparent 7px) 0 0/22px 48px repeat-y}
.draft{text-align:center;background:var(--red);color:#fff;font-family:Caveat;font-size:22px;transform:rotate(-.5deg);max-width:none}
header.page{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:10px;padding:22px 10px}
.logo{font-family:Caveat;font-weight:700;font-size:48px;color:var(--ink);text-decoration:none;line-height:.9}
.logo span{display:block;font-size:20px;font-weight:500}
nav a{color:var(--ink);margin-left:16px;font-size:20px;text-decoration:underline wavy #888 1px}
h1,h2{font-family:Caveat;font-weight:700;line-height:1}
.cover{position:relative;padding:30px;border:2px solid var(--ink);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;background:#fff9;margin-bottom:30px}
.cover h1{font-size:clamp(48px,8vw,96px);margin:0 0 10px}
.cover u{text-decoration-color:var(--red);text-decoration-thickness:4px}
.hand{font-size:22px;max-width:640px}.note{font-family:Caveat;font-size:28px;color:var(--red);transform:rotate(-3deg);display:inline-block}
.tape{position:absolute;width:110px;height:30px;background:#f3e3a3b3;box-shadow:0 1px 2px #0002;top:-12px;left:40%;transform:rotate(-4deg);z-index:2}
.tape.tl{left:-20px;top:6px;transform:rotate(-35deg)}.tape.tr{left:auto;right:-20px;top:6px;transform:rotate(35deg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:34px 26px}
.card{position:relative;background:#fff;padding:12px 12px 8px;box-shadow:2px 3px 8px #0003;transform:rotate(var(--r));color:var(--ink);text-decoration:none;transition:.15s}
.card:hover{transform:rotate(0) scale(1.04);z-index:3}
.card img{width:100%;aspect-ratio:1;object-fit:contain}
.card b{display:block;font-family:Caveat;font-size:30px}.card small{color:#777}
.ship{margin-top:40px}.ship h2{font-size:42px}
.product h1{font-size:clamp(48px,7vw,80px);margin:0}.pg{font-family:Caveat;font-size:24px;color:#888;margin:0}
.spread{display:flex;align-items:center;gap:20px;margin:24px 0}
.spread figure{position:relative;flex:1;margin:0;background:#fff;padding:12px;box-shadow:2px 3px 8px #0003}
.sk{transform:rotate(-2deg)}.fin{transform:rotate(1.5deg)}
.sk img{filter:grayscale(1) contrast(1.1) sepia(.15)}
.spread img{width:100%;aspect-ratio:1;object-fit:contain}
figcaption{font-family:Caveat;font-size:24px;text-align:center}
.arrow{font-family:Caveat;font-size:60px;color:var(--red)}
.buy{border:2px dashed var(--ink);padding:20px;border-radius:12px;background:#fff8}
.buy label{display:block;margin:10px 0}select{font:inherit;margin-left:8px;padding:4px 8px;border:2px solid var(--ink);border-radius:8px;background:#fff;max-width:100%}
.total{font-size:26px}.btn{font:700 28px Caveat;background:var(--ink);color:#fff;border:0;padding:10px 28px;border-radius:255px 15px 225px 15px/15px 225px 15px 255px;cursor:pointer;box-shadow:4px 4px 0 var(--red)}
.flip{display:flex;justify-content:space-between;margin-top:30px}.flip a{margin:0}
footer.page{padding:30px 10px;text-align:center;font-size:17px}
@media(max-width:700px){main{padding:20px 16px 30px 52px}main:before{left:8px}.spread{flex-direction:column}.arrow{transform:rotate(90deg)}.logo{font-size:38px}nav a{margin:0 12px 0 0}}
.doodles{display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;gap:10px 0;padding:20px 0;background-image:linear-gradient(#cfe0ef55 1px,transparent 1px),linear-gradient(90deg,#cfe0ef55 1px,transparent 1px);background-size:24px 24px}
.doodle{position:relative;width:var(--w);margin:-14px 6px;transform:translate(var(--dx),var(--dy)) rotate(var(--r));transition:transform .2s,filter .2s;text-decoration:none;color:var(--ink);text-align:center;filter:drop-shadow(2px 4px 4px #0004)}
.doodle img{width:100%;display:block;filter:drop-shadow(0 0 0 #fff) drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(2px 2px 0 #fff) drop-shadow(-2px -2px 0 #fff)}
.doodle b{font-family:Caveat;font-size:24px;background:#fff;padding:0 8px;border-radius:4px;display:inline-block;transform:rotate(calc(var(--r) * -.5))}
.doodle:hover{transform:translate(var(--dx),calc(var(--dy) - 10px)) rotate(0) scale(1.06);z-index:5;filter:drop-shadow(4px 12px 10px #0005)}
.doodle .tape{top:-8px;left:30%}
@media(max-width:700px){.doodle{width:calc(var(--w)*.62);margin:-6px 2px;transform:translate(calc(var(--dx)*.3),calc(var(--dy)*.3)) rotate(var(--r))}.doodle b{font-size:19px}}

/* homepage: drawn straight on paper */
.doodle{filter:none;mix-blend-mode:multiply}
.doodle img{filter:none}
.doodle b{background:none;padding:0;font-size:26px}
.doodle:hover{filter:none;transform:translate(var(--dx),calc(var(--dy) - 8px)) rotate(0) scale(1.05)}
/* product page: art as sticker on a tee */
.fin{background:#2b2b2b !important;display:flex;flex-direction:column;align-items:center}
.fin figcaption{color:#fff}
.stk{width:78% !important;transform:rotate(-6deg);transition:.2s;filter:drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(3px 6px 6px #0008)}
.fin:hover .stk{transform:rotate(0) scale(1.04)}
.also{font-family:Caveat;font-size:26px;margin:0 0 14px}.also a{color:var(--red)}
.sk img[src*="doodles-v2"]{filter:none;background:#fff}
.doodles{gap:26px 10px;padding:30px 0}
.doodle{margin:0 8px}
.shop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:start}
.pv{margin:0;background:#fff;padding:10px;box-shadow:2px 3px 8px #0003;transform:rotate(-1deg)}
.pv img{width:100%;display:block;aspect-ratio:1;object-fit:contain;background:#f4f1ea}
.pv figcaption{font-family:Caveat;font-size:20px;text-align:center}
.opt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}
.sw{display:flex;gap:8px;flex-wrap:wrap}
.dot{width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);cursor:pointer;padding:0;box-shadow:inset 0 0 0 2px #fff}
.dot.on{outline:3px solid var(--red);outline-offset:2px}
.life h2{font-size:40px;margin:30px 0 10px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.gal figure{margin:0;background:#fff;padding:8px 8px 4px;box-shadow:2px 3px 8px #0003}
.gal figure:nth-child(odd){transform:rotate(-1.5deg)}.gal figure:nth-child(even){transform:rotate(1.2deg)}
.gal img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover}
.gal figcaption{font-family:Caveat;font-size:20px;text-align:center}
@media(max-width:700px){.shop{grid-template-columns:1fr}}

html,body{overflow-x:hidden}

/* desk prop: real-world scale, page width = 21cm */
.prop{position:absolute;right:calc(var(--page-w) * -0.03);bottom:calc(var(--page-w) * var(--f) * var(--ar) * -0.3);width:calc(var(--page-w) * var(--f));max-width:none;height:auto;transform:rotate(var(--pr));transform-origin:70% 70%;pointer-events:none;z-index:0;filter:drop-shadow(3px 5px 5px #0005) drop-shadow(1px 1px 1px #0003);user-select:none}
/* product picker */
.pick h2{margin:30px 0 4px}.grp{font-family:Caveat;font-size:28px;margin:18px 0 6px;border-bottom:2px dashed #0002}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:16px}
.card{background:#fff;border:0;padding:8px 8px 6px;box-shadow:1px 2px 6px #0003;transform:rotate(var(--r));cursor:pointer;font:inherit;text-align:center;transition:transform .15s;position:relative}
.card:hover{transform:rotate(0) scale(1.04)}.card.on{outline:3px solid var(--red);transform:rotate(0) scale(1.04)}
.card.on:before{content:'';position:absolute;top:-9px;left:50%;width:56px;height:16px;margin-left:-28px;background:#f4e3a1cc;transform:rotate(-3deg)}
.card b{display:block;font-size:15px;line-height:1.1;margin-top:4px}.card span{font-family:Caveat;font-size:20px;color:var(--red)}
.mock{position:relative;width:100%;background:#f4f1ea}.mock img.blank{display:block;width:100%;height:100%;object-fit:contain}
.mock img.art{position:absolute;object-fit:contain;pointer-events:none}
.pv .mock{max-height:560px}.sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:8px;margin-top:6px}
.cw{border:2px solid transparent;background:#fff;padding:3px;cursor:pointer;font:inherit;border-radius:4px}.cw.on{border-color:var(--red)}
.cw small{display:block;font-size:13px;line-height:1.1}#cnote{display:block;color:#7a6a55}.il{font-size:16px;margin:4px 0 10px}
.buy h3{margin:6px 0;font-family:Caveat;font-size:30px}
.shop{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}.shop .pv{position:sticky;top:12px}.pick h2{margin-top:0}
.cards{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px}.right .buy{margin-top:24px}
@media(max-width:800px){.shop{grid-template-columns:1fr}.shop .pv{position:relative;top:0}.cards{grid-template-columns:repeat(3,1fr);gap:10px}.card b{font-size:13px}}
.pv .mock img{aspect-ratio:auto;background:none}.pv .mock img.art{width:auto}
.mock.dk img.art{mix-blend-mode:multiply}
.shop .pv{position:static}.left .buy{margin-top:20px}.right .pick{margin-top:0}
/* tint picker */
.mock{overflow:hidden;background:#fff}.mock .tint{position:absolute;inset:0;mix-blend-mode:multiply;-webkit-mask-size:100% 100%;mask-size:100% 100%;pointer-events:none}
.mock img.art{mix-blend-mode:normal}.mock.dkg img.art{filter:drop-shadow(0 0 1px #fff8)}
.mock .warn{position:absolute;right:3px;top:2px;font-style:normal;font-size:14px;background:#fff;border-radius:50%;padding:0 3px}
.pv .mock img.art{width:auto}

/* ===== SCRAPBOOK character pages (homepage stays notebook) ===== */
main.product{background:#c9a97c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");padding:34px 30px 44px;border-radius:4px}
main.product:before{display:none}
main.product h1{color:#2a2118;text-shadow:1px 1px 0 #fff8}
main.product .pg{color:#5b4632}
/* washi tape */
main.product .tape{background:repeating-linear-gradient(45deg,#e8b4b8cc 0 6px,#f3d1d3cc 6px 12px);height:24px;width:90px}
/* lifestyle = polaroids with photo corners */
main.product .gal{grid-auto-flow:row}
main.product .gal figure{background:#fffdf7;padding:10px 10px 6px;box-shadow:1px 3px 7px #0004;position:relative}
main.product .gal figure:nth-child(odd){transform:rotate(-2deg)}main.product .gal figure:nth-child(even){transform:rotate(1.8deg)}
main.product .gal figure:before,main.product .gal figure:after{content:'';position:absolute;width:22px;height:22px;background:linear-gradient(135deg,#2a2118 50%,transparent 50%);top:4px;left:4px;opacity:.85}
main.product .gal figure:after{transform:rotate(180deg);top:auto;left:auto;bottom:34px;right:4px}
main.product .gal figcaption{font-family:Caveat;font-size:21px;color:#3a2e22}
main.product .life h2{display:inline-block;background:#fffdf7;padding:2px 14px;transform:rotate(-1.5deg);box-shadow:1px 2px 4px #0003}
/* sketch spread as pasted photos */
main.product .spread figure{background:#fffdf7}
/* live preview = taped cut-out */
main.product .pv{background:#fff;padding:12px;transform:rotate(-1.2deg);clip-path:polygon(0 1%,4% 0,30% 1.2%,62% 0,100% .8%,99.4% 30%,100% 70%,99% 100%,70% 99.2%,35% 100%,0 99%,.6% 60%);box-shadow:none;filter:drop-shadow(2px 4px 5px #0005)}
main.product .pv:after{content:'';position:absolute;top:-8px;right:18%;width:90px;height:24px;background:repeating-linear-gradient(-45deg,#a8d5c9cc 0 6px,#c7e6dccc 6px 12px);transform:rotate(4deg)}
main.product .pv figcaption{font-family:Caveat;font-size:22px;color:#3a2e22}
/* buy box = cardstock note */
main.product .buy{background:#fbf6e9;border:0;border-radius:2px;box-shadow:2px 3px 8px #0004;position:relative}
/* price = ticket stub */
main.product #pname{display:inline-block;background:#f4d35e;color:#2a2118;padding:4px 18px;margin:4px 0 8px;font-size:26px;transform:rotate(-1deg);-webkit-mask:radial-gradient(circle 8px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 8px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 8px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 8px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
/* product cards = paper cut-outs */
main.product .card{background:#fffdf7;transform:rotate(calc(var(--r)*.8))}
main.product .grp{display:inline-block;background:#2a2118;color:#fbf6e9;padding:0 12px;border:0;transform:rotate(-1deg)}
main.product .pick h2{display:inline-block;background:#fffdf7;padding:2px 12px;transform:rotate(-1deg);box-shadow:1px 2px 4px #0003}
/* colour thumbs = hang tags */
main.product .cw{background:#fffdf7;border:1px solid #c9b48f;border-radius:4px 4px 10px 10px;position:relative;padding:12px 4px 4px}
main.product .cw:before{content:'';position:absolute;top:3px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#c9a97c;box-shadow:inset 0 0 0 1.5px #8a6f4c}
main.product .cw:nth-child(odd){transform:rotate(-1.5deg)}main.product .cw:nth-child(even){transform:rotate(1.2deg)}
main.product .cw.on{border:2px solid var(--red);transform:rotate(0)}
main.product .cw small{font-family:Caveat;font-size:16px}
main.product .flip a{background:#fffdf7;padding:2px 12px;box-shadow:1px 2px 4px #0003}
main.product .also{background:#fffdf7;display:inline-block;padding:2px 12px;transform:rotate(-1deg)}
@media(max-width:700px){
 main.product{padding:22px 14px 90px}
 main.product .gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:8px 4px 14px}
 main.product .gal figure{flex:0 0 78%;scroll-snap-align:center}
 main.product .btn{position:fixed;left:12px;right:12px;bottom:12px;z-index:50;width:auto}
 main.product .cw:nth-child(n){transform:none}
}
/* ===== v4 compact product page (.pp) ===== */
body.pp-body{background:#d9c3a0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
body.pp-body .draft{font-size:15px;transform:none;padding:2px}
body.pp-body header.page{padding:8px 12px;align-items:center}
body.pp-body .logo{font-size:26px}
.pp{max-width:1000px;margin:0 auto;padding:0 12px 90px}
.pp .ttl{display:flex;align-items:center;gap:10px;margin:2px 0 8px}
.pp .back{font-size:24px;text-decoration:none;color:#222;line-height:1}
.pp h1{font-family:Caveat,cursive;font-size:34px;margin:0;line-height:1;flex:1;min-width:0}
.pp .tag{background:#ffe066;font-family:'Patrick Hand';font-size:20px;padding:2px 12px 2px 16px;clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%);white-space:nowrap}
.pp .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.pp .car{position:relative;background:#fff;padding:6px;box-shadow:0 2px 6px #0003}
.pp .car .tape{position:absolute;z-index:3;top:-9px;left:50%;width:90px;height:20px;margin-left:-45px;background:#f4d35ecc;transform:rotate(-2deg)}
.pp .track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:4/5;background:#fff}
.pp .track::-webkit-scrollbar{display:none}
.pp .sl{flex:0 0 100%;scroll-snap-align:start;margin:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pp .sl>img{width:100%;height:100%;object-fit:contain}
.pp .sl>img.stk,.pp .sl:last-child>img,.pp .sl:nth-last-child(2)>img{object-fit:contain;padding:8%}
.pp .sl #pvbox{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.pp .sl #pvbox .mock{max-height:100%;width:auto;height:100%;max-width:100%}
.pp .sl figcaption{position:absolute;left:8px;bottom:6px;font-family:Caveat;font-size:19px;background:#fffc;padding:0 6px}
.pp .dots{position:absolute;bottom:14px;right:12px;display:flex;gap:5px}
.pp .dots i{width:8px;height:8px;border-radius:50%;background:#0003;cursor:pointer}.pp .dots i.on{background:#222}
.pp .cnt{position:absolute;top:12px;right:12px;font:13px 'Patrick Hand';background:#000a;color:#fff;padding:0 7px;border-radius:9px}
.pp .row{margin:0 0 10px}
.pp .lbl{display:block;font-family:'Patrick Hand';font-size:16px;margin-bottom:4px}
.pp .lbl small{color:#555}
.pp .chips{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.pp .chip{flex:0 0 66px;border:2px solid transparent;background:#fffb;padding:3px;border-radius:6px;cursor:pointer;font:12px/1.1 'Patrick Hand';text-align:center}
.pp .chip .mock{aspect-ratio:1/1!important}.pp .chip .mock img.blank{object-fit:contain}
.pp .chip span{display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp .chip.on{border-color:#222;background:#fff}
.pp .sw{display:flex;gap:8px;overflow-x:auto;padding:3px 2px 5px}
.pp .cw{flex:0 0 30px;height:30px;border-radius:50%;border:1px solid #0004;cursor:pointer;padding:0}
.pp .cw.on{outline:2px solid #222;outline-offset:2px}
.pp .pills{display:flex;gap:6px;overflow-x:auto}
.pp .pill{flex:0 0 auto;min-width:40px;padding:5px 9px;border:1.5px solid #222;background:#fff;border-radius:16px;font:15px 'Patrick Hand';cursor:pointer}
.pp .pill.on{background:#222;color:#fff}
.pp .shipline{font-size:14px;margin:4px 0 10px}
.pp .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;padding:8px 10px;box-shadow:0 1px 5px #0003}
.pp .bar b{font-size:22px;margin-right:6px}.pp .bar small{font-size:12px;color:#666}
.pp .bar .btn{position:static;margin:0;padding:10px 20px;font-size:18px;width:auto}
.pp .about{margin:10px 0;font-size:15px}.pp .about summary{cursor:pointer;font-family:'Patrick Hand'}
.pp .flip{display:flex;justify-content:space-between;margin:8px 0}
@media(max-width:700px){
 body.pp-body header.page nav{display:none}
 body.pp-body .logo span{display:none}
 body.pp-body .prop,body.pp-body footer.page{display:none}
 .pp .pgrid{grid-template-columns:1fr;gap:10px}
 .pp .car{margin:0 -12px;padding:0;box-shadow:none}
 .pp .track{aspect-ratio:1/1}
 .pp .bar{position:fixed;left:0;right:0;bottom:0;z-index:50;box-shadow:0 -2px 8px #0003}
}
main.pp{background:transparent;box-shadow:none;border-radius:0;padding:0 12px 90px}main.pp:before{display:none}
.pp .pgrid>*{min-width:0}.pp .buy{border:0;padding:0;background:none;border-radius:0}
.pp .sl #pvbox .mock{aspect-ratio:auto}
@media(max-width:700px){main.pp{padding:0 12px 80px}body.pp-body{overflow-x:hidden}}
.pp .sw{flex-wrap:nowrap}.pp .chips{flex-wrap:nowrap}
.pp .chip{flex:0 0 58px;padding:2px;font-size:11px}.pp .chip .mock{width:100%}
.pp .car .tape{width:60px;height:14px;margin-left:-30px;top:-6px}
@media(max-width:700px){body.pp-body header.page{padding:4px 12px}body.pp-body .logo{font-size:22px}.pp h1{font-size:30px}.pp .ttl{margin:0 0 8px}.pp .row{margin-bottom:8px}.pp .flip{margin:4px 0}}
.pp .about:not([open])>*:not(summary){display:none}.pp .about p{position:static;margin:6px 0;transform:none}
.pp .chip{width:58px;overflow:hidden}.pp .chip span{font-size:10.5px}
@media(min-width:701px){.pp .chips,.pp .sw,.pp .pills{flex-wrap:wrap;overflow:visible}}
@media(max-width:700px){.pp .track{aspect-ratio:auto;height:min(100vw,calc(100svh - 450px));min-height:300px}}
@media(max-width:700px){.pp .chips,.pp .sw,.pp .pills{scrollbar-width:none}.pp .chips::-webkit-scrollbar,.pp .sw::-webkit-scrollbar,.pp .pills::-webkit-scrollbar{display:none}}
@media(max-width:700px){main.pp.has-prop{padding-bottom:80px!important;margin-bottom:0!important}}
/* v5: no cropping in carousel */
.pp .track{background:#efe4cf}
.pp .sl{background:#efe4cf}
.pp .sl>img,.pp .sl>img.stk,.pp .sl:last-child>img,.pp .sl:nth-last-child(2)>img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;padding:0}
.pp .sl:last-child>img,.pp .sl:nth-last-child(2)>img{max-width:88%;max-height:88%}
.pp .sl #pvbox{container-type:size;width:100%;height:100%}
.pp .sl #pvbox .mock{width:min(100cqw,calc(100cqh * var(--ar)))!important;height:auto!important;max-width:none;max-height:none;flex:none}
.pp .sl #pvbox .mock img.blank{width:100%;height:100%;object-fit:fill}
.pp .sl figcaption{font-size:16px}
/* === marker header (replaces cardboard look) === */
@font-face{font-family:'Permanent Marker';src:url(/fonts/permanent-marker.woff2) format('woff2');font-display:swap}
header.page,body.pp-body header.page{background:var(--paper);background-image:repeating-linear-gradient(var(--paper) 0 31px,var(--line) 31px 32px),radial-gradient(#0000000a 1px,transparent 1px);background-size:auto,4px 4px;padding:22px 30px 14px;align-items:center;border-radius:6px 6px 0 0;box-shadow:0 -1px 0 #e9e2cf inset;position:relative;z-index:1}
header.page+main,header.page~main{border-top-left-radius:0;border-top-right-radius:0}
.logo.mk{font-family:'Permanent Marker',Caveat,cursive;font-weight:400;font-size:clamp(38px,6vw,60px);line-height:1;color:var(--ink);text-decoration:none;display:inline-block;position:relative;transform:rotate(-2deg);padding-bottom:4px}
.logo.mk .mkt{display:inline-flex;flex-wrap:wrap;gap:0 .28em}
.logo.mk .mw{display:inline-flex;white-space:nowrap}
.logo.mk .ml{display:inline-block;color:var(--c);transform:rotate(var(--r)) translateY(calc(var(--r)*.4px));margin-right:-.04em;text-shadow:.03em .02em 0 color-mix(in srgb,var(--c) 70%,#000 30%),-.02em -.01em 0 color-mix(in srgb,var(--c) 55%,transparent);-webkit-text-stroke:1.2px color-mix(in srgb,var(--c) 75%,#000);mix-blend-mode:multiply}
.logo.mk:hover .ml{transform:rotate(calc(var(--r)*-1))}
.logo.mk .ml{transition:transform .2s}
.logo.mk .mku{display:block;width:92%;height:.3em;margin:-.05em 0 0 2%;overflow:visible}
.logo.mk .mku path{fill:none;stroke:#ffbe0b;stroke-width:9;stroke-linecap:round;opacity:.85;mix-blend-mode:multiply}
.logo.mk .sub{display:block;font-family:Caveat;font-weight:700;font-size:22px;color:#3a86ff;transform:rotate(1deg);margin:4px 0 0 6px}
header.page nav a{font-size:21px;text-decoration:underline wavy #ff3b6b 1.5px;text-underline-offset:4px;padding:6px 2px;display:inline-block}
header.page nav a:focus-visible,.logo.mk:focus-visible{outline:3px dashed #3a86ff;outline-offset:4px;border-radius:4px}
body.pp-body .logo.mk{font-size:34px}
body.pp-body .logo.mk .sub{display:none}
@media(max-width:700px){header.page,body.pp-body header.page{padding:16px 16px 10px}.logo.mk{font-size:40px}header.page nav{width:100%}header.page nav a{margin:0 14px 0 0;font-size:19px}body.pp-body .logo.mk{font-size:28px}}
@media(prefers-reduced-motion:reduce){.logo.mk .ml{transition:none}}
.logo.mk .mkt,.logo.mk .mw,.logo.mk .ml{font-size:inherit;font-weight:400}
.logo.mk .mkt{display:inline-flex}.logo.mk .mw{display:inline-flex}.logo.mk .ml{display:inline-block}
.logo.mk .mkt{-webkit-text-stroke:1.2px currentColor}
/* === header written directly on the notebook lines (v7) === */
header.page,body.pp-body header.page{background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;max-width:none;margin:0 0 18px;padding:0 0 6px}
main>header.page{position:relative;z-index:2}
body.pp-body{background:var(--paper) repeating-linear-gradient(var(--paper) 0 31px,var(--line) 31px 32px)!important}
body.pp-body main.pp{padding-top:18px}
body.pp-body main.pp>header.page{margin-bottom:10px}
@media(max-width:700px){header.page,body.pp-body header.page{padding:0 0 4px;margin-bottom:12px}}
/* === intro written directly on the lines (v8) === */
.cover{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;margin:0 0 32px}
.cover>.tape{display:none}
.cover h1{line-height:1;margin:0 0 16px}
.cover p.hand,.cover p{line-height:32px;margin:0 0 32px}
.cover .note{margin:0}
/* === cart + checkout (pay v1) === */
header.page{position:relative}
.cartlink{position:absolute;right:0;top:4px;font:400 20px 'Permanent Marker',Caveat,cursive;color:var(--ink);text-decoration:none;background:#fff9;padding:4px 12px 2px;border:2px solid var(--ink);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;transform:rotate(2deg);box-shadow:3px 3px 0 #ffbe0b;z-index:5;white-space:nowrap}
.cartlink i{font-style:normal;display:none;margin-left:6px;background:var(--red);color:#fff;border-radius:50%;min-width:24px;height:24px;line-height:24px;text-align:center;font:700 15px 'Patrick Hand';padding:0 4px;vertical-align:2px}
.cartlink i.on{display:inline-block}
body.pp-body .cartlink{top:50%;transform:translateY(-50%) rotate(2deg);font-size:17px}
@media(max-width:700px){.cartlink{font-size:16px;padding:3px 9px 1px;top:0}body.pp-body .cartlink{font-size:15px}}
.btn.ok{background:#06a77d;box-shadow:4px 4px 0 #ffbe0b}
.toast{position:fixed;left:50%;bottom:86px;transform:translate(-50%,20px) rotate(-1deg);background:#fffbe0;border:2px solid var(--ink);padding:8px 16px;font:18px 'Patrick Hand';box-shadow:3px 3px 0 var(--red);opacity:0;pointer-events:none;transition:.25s;z-index:100;max-width:92vw}
.toast.on{opacity:1;transform:translate(-50%,0) rotate(-1deg);pointer-events:auto}.toast a{color:var(--red);margin-left:6px}
main.ck{padding-bottom:50px}
.ckh{font-size:clamp(44px,8vw,72px);margin:4px 0 14px}.ckh .hand{font-family:'Patrick Hand';font-size:22px;color:#777}
.ck h2{font-size:32px;margin:22px 0 6px}.ck h2 small{font:16px 'Patrick Hand';color:#555}
.empty{font-size:24px}
.clist{list-style:none;margin:0;padding:0}
.cl{display:grid;grid-template-columns:64px 1fr auto auto;gap:4px 12px;align-items:center;padding:8px 0;border-bottom:2px dashed #0002}
.cl-img{position:relative;width:64px;height:64px;background:#fff;box-shadow:1px 2px 5px #0003;transform:rotate(-2deg);display:block}
.cl:nth-child(even) .cl-img{transform:rotate(2deg)}
.cl-img img{width:100%;height:100%;object-fit:contain;padding:4px}
.cl-sw{position:absolute;right:-6px;bottom:-6px;width:18px;height:18px;border-radius:50%;border:2px solid var(--ink)}
.cl-txt{min-width:0;line-height:1.1}.cl-txt b{display:block;font-family:Caveat;font-size:26px}.cl-txt span{display:block;font-size:17px}.cl-txt small{color:#555;font-size:15px}
.cl-qty{display:flex;align-items:center;gap:2px}.cl-qty button{width:34px;height:34px;border:2px solid var(--ink);background:#fff;border-radius:50%;font:20px/1 'Patrick Hand';cursor:pointer}
.cl-qty output{min-width:26px;text-align:center;font-size:20px}.cl-qty.ro{font-size:18px;color:#555}
.cl-p{text-align:right;font-size:20px;font-weight:700}.cl-x{display:block;margin-left:auto;background:none;border:0;color:var(--red);font:14px 'Patrick Hand';text-decoration:underline;cursor:pointer;padding:2px 0}
.clist.ro .cl{grid-template-columns:48px 1fr auto auto}.clist.ro .cl-img{width:48px;height:48px}.clist.ro .cl-txt b{font-size:21px}
#tsum .cl{grid-template-columns:1fr auto auto}
.ctot{display:flex;justify-content:space-between;align-items:baseline;font-size:24px;padding:8px 0 0}.ctot b{font-family:Caveat;font-size:36px}
.ctot.sm{font-size:18px;padding:2px 0}.ctot.sm b{font:700 20px 'Patrick Hand'}
.cgo{text-align:right;margin-top:16px}.cgo .btn,.ck a.btn{display:inline-block;text-decoration:none}
.ckgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:34px;align-items:start}
.f{display:block;margin:0 0 10px}.f>span{display:block;font-size:17px;margin-bottom:2px}.f small{color:#666;font-size:14px}
.f input{width:100%;font:20px 'Patrick Hand';padding:9px 12px;border:2px solid var(--ink);border-radius:10px 4px 12px 4px/4px 12px 4px 10px;background:#fffffff2;color:var(--ink)}
.f input:focus{outline:3px dashed #3a86ff;outline-offset:2px}
.f input.bad{border-color:var(--red);background:#fff1ef}
.err{display:block;color:var(--red);font:normal 15px 'Patrick Hand';min-height:0}
.frow{display:flex;gap:12px}.frow .w2{flex:2}.frow .w1{flex:1}.frow .f{min-width:0}
.ship-opts{display:grid;gap:8px}
.so{display:flex;gap:10px;align-items:center;border:2px solid var(--ink);border-radius:12px 4px 12px 4px;padding:10px 12px;background:#fff9;cursor:pointer}
.so input{width:22px;height:22px;accent-color:var(--ink)}.so span{font-size:19px}.so small{display:block;color:#666;font-size:14px}
.so:has(input:checked){background:#fffbe0;box-shadow:3px 3px 0 #ffbe0b}
.sr{position:absolute;left:-9999px}
.cksum{position:sticky;top:12px;background:#fff;padding:18px 18px 14px;box-shadow:2px 3px 10px #0003;transform:rotate(.6deg)}
.cksum .tape{top:-12px;left:38%}
.cksum h2:first-of-type{margin-top:4px}
#paypal-buttons{min-height:50px;margin:8px 0 4px;position:relative;z-index:1}
.ppnote{font-size:18px;color:#555}
.ckmsg{border:2px solid var(--ink);padding:8px 12px;margin:6px 0 10px;background:#fffbe0;font-size:17px}.ckmsg.bad{border-color:var(--red);background:#fff1ef}
.fine{font-size:14px;color:#555;line-height:1.3}
.ckbusy{position:fixed;inset:0;background:#fbf7ecd9;display:flex;align-items:center;justify-content:center;z-index:200;font:700 34px Caveat}
.ckbusy[hidden]{display:none}
.hand.big{font-size:28px}
@media(max-width:800px){.ckgrid{grid-template-columns:1fr;gap:10px}.cksum{position:static;transform:none;margin:0 -6px}}
@media(max-width:700px){.ck h2{font-size:28px}.cl{grid-template-columns:56px 1fr auto;grid-template-areas:'i t p' 'i q p'}.cl-img{grid-area:i;width:56px;height:56px}.cl-txt{grid-area:t}.cl-qty{grid-area:q}.cl-p{grid-area:p}.clist.ro .cl{grid-template-columns:44px 1fr auto}.clist.ro .cl-img{width:44px;height:44px}#tsum .cl{grid-template-columns:1fr auto;grid-template-areas:'t p' 'q p'}.frow{gap:8px}.toast{bottom:76px}}
@media(max-width:700px){body:not(.pp-body) .cartlink{position:static;margin:6px 0 0 auto;transform:rotate(2deg)}}
/* === header option: shared grid snapping (header sits on the ruled lines) === */
main>header.page{margin:2px 0 32px!important;padding:0!important;align-items:flex-start;min-height:96px}
@media(max-width:700px){main>header.page{margin-top:12px!important;min-height:96px}}
.logo.hx{display:block;text-decoration:none;color:var(--ink);position:relative;transform:none;font-size:inherit}
.hx .ht{display:block;vertical-align:top;height:64px;line-height:64px;white-space:nowrap;position:relative;top:var(--bl,0px)}
.hx .ht .w{display:inline-block;position:relative}
.logo.hx .ht span{font-size:inherit;font-weight:inherit}
.hx .sub{display:block;height:32px;line-height:32px;font:700 25px Caveat,cursive;color:#2f6fdc;margin-left:4px;position:relative;top:var(--sbl,6px)}
header.page nav{line-height:32px;margin-top:64px;position:relative;top:-2px}
header.page nav a{padding:0 2px}
.hx:focus-visible{outline:3px dashed #3a86ff;outline-offset:4px;border-radius:4px}
.cover h1{font-size:clamp(40px,5.4vw,62px)!important;line-height:64px!important;margin:0 0 32px!important}
@media(max-width:700px){.hx .ht{height:64px;line-height:64px;top:var(--blm,0px)}.hx .sub{font-size:22px;top:var(--sblm,9px)}header.page nav{margin-top:0}.cover h1{line-height:48px!important;font-size:42px!important;margin-bottom:16px!important}}
body.pp-body main>header.page{min-height:0;margin:0 0 10px!important}
body.pp-body .hx .ht{height:auto;line-height:1.15;top:0}
body.pp-body .hx .sub,body.pp-body .hx .dd{display:none}
body.pp-body header.page nav{margin-top:0}
@media(max-width:700px){main{background-image:linear-gradient(90deg,transparent 42px,#f1a9a0 42px 44px,transparent 44px),repeating-linear-gradient(var(--paper) 0 31px,var(--line) 31px 32px),radial-gradient(#0000000a 1px,transparent 1px)}}
.hx .mbr{display:none}
@media(max-width:700px){.hx .mbr{display:inline}.hx .ht{height:128px;white-space:normal}main>header.page{min-height:160px}}
body.pp-body .hx .mbr{display:none}body.pp-body .hx .ht{height:auto;white-space:nowrap}
@media(max-width:700px){body:not(.pp-body) main>header.page{row-gap:0}body:not(.pp-body) header.page .cartlink{box-sizing:border-box;height:30px;margin:1px 0 1px auto;display:flex;align-items:center}.cover h1{margin-bottom:32px!important}}
body.pp-body .logo.hx .ht{display:inline-block}body.pp-body .logo.hx .ht span.w{display:inline-block}body.pp-body .logo.hx .ht span.hl{display:block}
body.pp-body header.page nav{margin-right:120px}
/* === header option B: chunky marker caps, one colour per word, sitting on the line + his own doodle === */
@font-face{font-family:'Londrina Solid';src:url(/fonts/londrina-solid-black.woff2) format('woff2');font-weight:900;font-display:swap}
.hxB{--bl:-1px;--blm:4.5px}
.hxB .ht{font:900 90px/64px 'Londrina Solid','Permanent Marker',cursive;letter-spacing:.02em;display:inline-block}
.hxB .ht .w{color:transparent;background:repeating-linear-gradient(98deg,var(--f) 0 9px,color-mix(in srgb,var(--f) 82%,#000) 9px 10.5px,var(--f) 10.5px 17px,color-mix(in srgb,var(--f) 88%,#fff) 17px 19px);-webkit-background-clip:text;background-clip:text;transform:rotate(var(--r));opacity:.93;mix-blend-mode:multiply;margin-right:.08em}
.hxB .dino{position:absolute;right:-112px;bottom:-6px;width:100px;height:auto;transform:rotate(6deg);mix-blend-mode:multiply}

@media(max-width:700px){.hxB .ht{font-size:76px;line-height:64px}.hxB .dino{width:70px;right:auto;left:214px;top:11px;bottom:auto}}
body.pp-body .hxB .ht{font-size:40px}
@media(max-width:700px){body.pp-body .hxB .ht{font-size:30px}}

/* test-mode only (mode.js adds html.sbx when /api/config env != live) */
html:not(.sbx) .tm{display:none!important}