@font-face{font-family:'IM Fell English';src:url(/assets/fonts/IMFellEnglish-Regular.ttf) format('truetype');font-display:swap}
:root{--ink:#211B16;--paper:#F3E9D6;--rust:#a3401f;--fell:'IM Fell English',Georgia,serif;--num:'Playfair Display',Georgia,serif}
*,*::before,*::after{box-sizing:border-box}
html{background:#2a211b}
body{margin:0;position:relative;overflow-x:hidden;color:var(--ink);font:18px/1.6 var(--num);font-variant-numeric:lining-nums;background:var(--paper) url(/assets/ink/paper.webp);background-size:800px;box-shadow:inset 0 0 180px rgba(110,70,30,.35)}
.num,input,button{font-family:var(--num)!important;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1}
h1,h2,h3,.brand span,.tl,.btn,nav a{font-family:var(--fell);font-weight:400;line-height:1.05;letter-spacing:.01em}
h1 .num,h2 .num,h3 .num,.tl .num{font-weight:700;font-size:.9em}
h1{font-size:clamp(2.6rem,8vw,5.6rem);margin:.1em 0;text-shadow:2px 3px 0 rgba(33,27,22,.18)}
h2{font-size:clamp(2rem,6vw,3.6rem);margin:.2em 0}
h3{font-size:1.8rem;margin:.2em 0}
a{color:var(--rust)}
img{max-width:100%;height:auto}
.inklayer{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.ink{position:absolute;mix-blend-mode:multiply;max-width:none}
main,header,footer{position:relative;z-index:2}
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:14px 4vw;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.5rem;color:var(--ink);text-decoration:none}
.brand span{font-size:1.7rem}
nav{display:flex;gap:1.1rem;flex-wrap:wrap}
nav a{color:var(--ink);font-size:1.3rem;text-decoration:none;border-bottom:3px solid transparent}
nav a:hover{border-color:var(--ink)}
.cartlink .num{background:var(--ink);color:var(--paper);border-radius:50% 40% 55% 45%;padding:0 .45em;font-size:.85rem}
.torn{clip-path:polygon(0 2%,4% 0,9% 1.6%,15% .2%,22% 1.9%,28% .4%,35% 1.5%,42% 0,50% 1.8%,57% .3%,63% 1.7%,70% 0,77% 1.4%,84% .2%,91% 1.9%,96% .5%,100% 1.5%,100% 98.4%,95% 100%,89% 98.2%,83% 99.7%,76% 98.1%,69% 99.8%,62% 98.4%,55% 100%,48% 98.3%,41% 99.6%,34% 98%,27% 99.8%,20% 98.3%,13% 99.9%,7% 98.2%,0 99.6%)}
.torn-t{clip-path:polygon(0 6%,5% 0,11% 5%,18% 1%,26% 6%,33% 0,41% 4%,49% 1%,57% 6%,64% 0,72% 5%,80% 1%,88% 6%,95% 0,100% 4%,100% 100%,0 100%)}
.hero{background:rgba(255,250,238,.55);margin:10px 3vw 30px;padding:40px 5vw 60px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.bigace{width:min(230px,48vw);filter:drop-shadow(6px 9px 7px rgba(0,0,0,.45));transform:rotate(-4deg)}
.scrawl{font-family:Caveat,cursive;color:var(--rust);font-size:1.7rem;margin:.2em 0}
.rot{transform:rotate(-3deg);display:inline-block}
.lede{font-size:1.2rem;max-width:40em;margin:.5em auto 1.2em}
.band{padding:30px 4vw 50px;text-align:center}
.c{text-align:center}
.btn{display:inline-block;background:var(--ink);color:var(--paper);font-size:1.45rem;padding:.55em 1.1em .5em;border:0;cursor:pointer;text-decoration:none;margin:.3em;border-radius:3px 9px 4px 12px/10px 3px 12px 4px;box-shadow:4px 5px 0 rgba(163,64,31,.55);transform:rotate(-1deg);font-family:var(--fell)!important}
.btn:hover{transform:rotate(1deg) scale(1.03)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:38px 30px;max-width:1300px;margin:30px auto;text-align:left}
.tile{position:relative;display:block;background:#fffaf0;padding:12px 12px 16px;color:var(--ink);text-decoration:none;transform:rotate(var(--r));box-shadow:3px 8px 18px rgba(0,0,0,.28);transition:transform .2s}
.tile:hover{transform:rotate(0) scale(1.03);z-index:4}
.tile img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;filter:contrast(1.05)}
.tl{display:block;font-size:1.4rem;margin:.6em 0 .2em}
.tp{font-size:1.05rem;color:var(--rust);font-weight:700}
.tape{position:absolute;top:-12px;left:50%;width:110px;height:28px;margin-left:-55px;background:rgba(220,205,170,.75);transform:rotate(-4deg);box-shadow:0 1px 3px rgba(0,0,0,.15);z-index:2}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;background:var(--ink);color:var(--paper);padding:60px 6vw;margin:20px 0}
.facts p{margin:.3em 0}
.product{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;padding:50px 5vw;background:rgba(255,250,238,.5);margin:10px 3vw}
.pimg{position:relative;background:#fffaf0;padding:14px;transform:rotate(-1.5deg);box-shadow:6px 12px 26px rgba(0,0,0,.35);align-self:start}
.pimg img{display:block;width:100%}
.pinfo{text-align:left}
.pinfo h1{font-size:clamp(2.2rem,5vw,3.8rem)}
.pinfo .lede{margin-left:0}
.price{font-size:2.2rem;font-weight:900;margin:.2em 0}
.price small{font-size:1rem;font-weight:400}
.buy{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.buy input{width:4.2em;font-size:1.2rem;padding:.35em;border:2px solid var(--ink);background:#fffaf0}
.spec{padding-left:1.1em}
.crumbs a{color:var(--rust);font-family:Caveat,cursive;font-size:1.4rem}
.story{max-width:900px;margin:10px auto;background:rgba(255,250,238,.55);text-align:left;padding:50px 6vw}
.story .portrait{float:right;width:45%;margin:0 0 1em 1.5em;transform:rotate(2deg);box-shadow:5px 10px 20px rgba(0,0,0,.35);border:10px solid #fffaf0}
.cart{max-width:900px;margin:10px auto;background:rgba(255,250,238,.55)}
.line{display:grid;grid-template-columns:110px 1fr auto auto;gap:14px;align-items:center;text-align:left;border-bottom:2px dashed rgba(33,27,22,.3);padding:12px 0}
.line img{width:110px}
.line .tl{font-size:1.25rem;margin:0}
.line input{width:3.6em;font-size:1rem;padding:.25em;border:2px solid var(--ink);background:#fffaf0}
.rm{background:none;border:0;color:var(--rust);cursor:pointer;font-size:1.4rem}
.totals{text-align:right;font-size:1.2rem;margin:1em 0}
.totals strong{font-size:1.6rem}
.note{background:#fff3c4;border:2px dashed var(--rust);padding:1em;text-align:left}
.foot{background:var(--ink);color:var(--paper);padding:60px 4vw 40px;margin-top:40px;text-align:center}
.foot .brand{color:var(--paper);justify-content:center}
.foot .brand img{filter:invert(1) sepia(.3)}
.credit a{color:var(--paper);font-family:Caveat,cursive;font-size:1.4rem}
@media (max-width:760px){
 body{font-size:17px}.product{grid-template-columns:1fr;padding:30px 5vw}.story .portrait{float:none;width:100%;margin:0 0 1em}
 .line{grid-template-columns:70px 1fr auto;}.line img{width:70px}.line .lp{grid-column:2}.grid{grid-template-columns:1fr 1fr;gap:26px 14px}.tl{font-size:1.05rem}.tile{padding:7px 7px 10px}.tape{width:70px;margin-left:-35px;height:20px}
 .ink{width:min(var(--w,300px),60vw)}nav a{font-size:1.1rem}.brand span{font-size:1.4rem}
}
.band>h1,.band>h2,.band>.lede,.band>.scrawl,.hero h1,.hero .lede,.pinfo h1,.pinfo .lede,.spec,.story p{text-shadow:0 0 2px var(--paper),0 0 6px var(--paper),0 0 12px var(--paper),0 0 18px var(--paper)}
/* ---------- MESS v2 ---------- */
.marks,.overink{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.marks{z-index:4}.overink{z-index:6}
.mk{position:absolute;overflow:visible;mix-blend-mode:multiply}
.overink .ink{opacity:.6}
.mtape{position:absolute;height:30px;background:rgba(226,212,170,.72);box-shadow:0 2px 4px rgba(0,0,0,.18);clip-path:polygon(2% 0,98% 6%,100% 40%,97% 100%,3% 94%,0 55%)}
main>section:nth-child(odd){transform:rotate(-.9deg) translateX(-6px)}
main>section:nth-child(even){transform:rotate(.8deg) translateX(8px)}
h1,h2{position:relative;display:inline-block}
h1::after,h2::after{content:"";position:absolute;left:8%;right:20%;top:78%;height:120px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'%3E%3Cpath fill='%23211B16' d='M0 6 Q150 -4 300 8 L300 14 Q290 14 288 30 Q286 40 283 30 Q281 14 260 14 L236 14 Q232 14 231 70 Q229 82 226 70 Q225 16 205 15 L150 16 Q145 16 144 44 Q142 52 139 44 Q138 16 120 16 L74 15 Q70 15 69 104 Q67 116 63 104 Q62 15 40 14 L20 14 Q16 14 15 36 Q13 44 11 36 Q10 14 0 12Z'/%3E%3C/svg%3E") no-repeat;background-size:100% 100%;opacity:.88;z-index:-1}
.btn{position:relative;z-index:7}
.btn::before{content:"";position:absolute;inset:-10px -14px -8px -12px;border:2.5px solid #3b3a38;border-radius:40% 8% 35% 12%/20% 45% 15% 40%;transform:rotate(-3deg);pointer-events:none}
.btn::after{content:"";position:absolute;left:-6%;right:-10%;bottom:-16px;height:9px;border-bottom:3px solid var(--rust);border-radius:0 0 50% 40%/0 0 100% 60%;transform:rotate(1.6deg);pointer-events:none}
.grid{gap:10px 0}
.tile{transform:translate(var(--dx),var(--dy)) rotate(var(--r));margin:-4px -10px}
.tile:nth-child(3n){z-index:2}.tile:nth-child(4n+1){z-index:3}
.tile:hover{transform:translate(var(--dx),var(--dy)) rotate(0) scale(1.05);z-index:8}
.top{border-bottom:3px solid #3b3a38;border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='6'%3E%3Cpath d='M0 3 Q7 0 15 4 T30 2' stroke='%23211B16' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") 0 0 6 0 round;transform:rotate(-.6deg)}
nav a:nth-child(2){text-decoration:line-through wavy var(--rust) 2px}
nav a:nth-child(2)::after{content:" the bloke";font-family:Caveat,cursive;color:var(--rust);font-size:1rem;margin-left:4px}
.foot{position:relative;overflow:hidden}
.foot::before,.foot::after{content:"";position:absolute;width:420px;height:420px;background:#F3E9D6;opacity:.85;-webkit-mask:url(/assets/ink/splat3.webp) center/contain no-repeat;mask:url(/assets/ink/splat3.webp) center/contain no-repeat;pointer-events:none}
.foot::before{left:-120px;top:-90px;transform:rotate(40deg)}
.foot::after{right:-140px;bottom:-160px;-webkit-mask-image:url(/assets/ink/splat6.webp);mask-image:url(/assets/ink/splat6.webp);opacity:.6}
.footin{position:relative;z-index:7;transform:rotate(-1.2deg)}
.lede{transform:rotate(-.6deg)}
.pimg{transform:rotate(-4deg)}
.facts>div:nth-child(1){transform:rotate(-3deg)}.facts>div:nth-child(2){transform:rotate(2.5deg) translateY(14px)}.facts>div:nth-child(3){transform:rotate(-1.5deg)}
@media (max-width:760px){.tile{margin:-2px -4px}.mk{max-width:60vw}.foot::before,.foot::after{width:260px;height:260px}}
@media (max-width:760px){.tile{transform:translate(calc(var(--dx)*.3),var(--dy)) rotate(calc(var(--r)*.7));margin:0 2px}.grid{padding:0 6px}main>section{transform:none!important}}
.price,.buy,.tp{position:relative;z-index:7;text-shadow:0 0 3px #fffaf0,0 0 8px #fffaf0}