:root{--char:#1f2124;--char2:#2c2f33;--denim:#5d7a95;--fade:#9db2c4;--off:#ece6d8;--rust:#c2552d}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--char);color:var(--off);font:16px/1.6 Inter,system-ui,sans-serif;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;filter:url(#grain);background:#fff;opacity:.18;mix-blend-mode:overlay;z-index:99}
h1,h2,.logo{font-family:"Rubik Dirt",Impact,sans-serif;font-weight:400;letter-spacing:.02em}
a{color:var(--fade)}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px dashed var(--rust);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--off);color:#000;padding:.5rem;z-index:100}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 5vw;border-bottom:2px dashed #555}
.logo{font-size:1.8rem;color:var(--off);text-decoration:none;line-height:1}.logo span{display:block;font:1rem "Permanent Marker";color:var(--fade);transform:rotate(-4deg)}
nav a{font-family:"Special Elite";margin-left:1.4rem;text-decoration:none;color:var(--off)}nav a:hover{color:var(--rust)}
.menu{display:none;font-family:"Special Elite";background:none;color:var(--off);border:2px solid var(--off);padding:.3rem .8rem}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:center;padding:4rem 5vw;min-height:80vh;background:radial-gradient(circle at 70% 40%,#3a4552,var(--char) 70%)}
.hero-copy{transform:rotate(-1.5deg)}
h1{font-size:clamp(4rem,12vw,9rem);line-height:.85;margin:.5rem 0;color:var(--off);text-shadow:4px 4px 0 var(--denim)}
.lede{font-family:"Special Elite";font-size:1.15rem;max-width:32ch;color:#cfd6dc}
.tape{display:inline-block;background:rgba(236,230,216,.85);color:#222;font-family:"Special Elite";padding:.3rem 1rem;transform:rotate(3deg);box-shadow:0 2px 4px #0006}
.btn{display:inline-block;font-family:"Permanent Marker";font-size:1.2rem;background:var(--off);color:var(--char);border:0;padding:.7rem 1.6rem;text-decoration:none;transform:rotate(-2deg);box-shadow:5px 5px 0 var(--denim);cursor:pointer}
.btn:hover{transform:rotate(1deg);background:var(--fade)}
.hero-art{position:relative;height:420px;background:repeating-linear-gradient(0deg,#5a3a30 0 26px,#2a2020 26px 30px),#5a3a30;filter:grayscale(.6) contrast(1.3);border:6px solid var(--off);transform:rotate(2deg);box-shadow:10px 10px 0 #000}
.hero-art::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 58px,#2a2020 58px 62px);background-size:120px 30px;opacity:.6}
.rack{position:absolute;top:40px;left:8%;right:8%;height:8px;background:#888;border-radius:4px}
.tee{position:absolute;top:44px;width:32%}.tee path{stroke:#111;stroke-width:1.5;stroke-dasharray:3 2}
.t1{left:4%}.t1 path{fill:var(--fade)}.t2{left:34%;transform:rotate(3deg)}.t2 path{fill:#3d4650}.t3{left:64%;transform:rotate(-3deg)}.t3 path{fill:var(--off)}
.torn{height:30px;background:var(--off);clip-path:polygon(0 60%,4% 30%,9% 70%,14% 20%,20% 65%,26% 35%,31% 75%,37% 25%,43% 60%,49% 30%,55% 70%,61% 20%,67% 65%,73% 30%,79% 75%,85% 35%,91% 65%,96% 25%,100% 55%,100% 100%,0 100%)}
.shop{background:var(--off);color:var(--char);padding:3rem 5vw}
.stamp{display:inline-block;font-size:clamp(2.2rem,6vw,3.5rem);border:4px solid currentColor;padding:0 1rem;transform:rotate(-2deg);margin:0 0 1rem}
.note{font-family:"Special Elite";background:#fff3a0;display:inline-block;padding:.3rem .8rem;transform:rotate(.8deg);margin-left:1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2.2rem;margin-top:2rem}
.card{background:#fff;padding:.8rem .8rem 1.2rem;box-shadow:4px 6px 0 #0003;position:relative;transition:transform .2s}
.card:nth-child(odd){transform:rotate(-1.5deg)}.card:nth-child(even){transform:rotate(1.2deg)}.card:hover{transform:rotate(0) scale(1.03)}
.card::before{content:"";position:absolute;top:-12px;left:40%;width:70px;height:22px;background:rgba(200,190,160,.75);transform:rotate(-6deg)}
.pic{aspect-ratio:1;background:#ccc;display:grid;place-items:center;filter:grayscale(1) contrast(1.6) brightness(1.05);position:relative;overflow:hidden}
.pic::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0001 0 2px,transparent 2px 4px)}
.pic svg{width:70%}
.card h3{font-family:"Permanent Marker";font-weight:400;margin:.6rem 0 0;font-size:1.25rem}
.card .price{font-family:"Special Elite"}.sticker{position:absolute;top:1.2rem;right:-.6rem;background:var(--rust);color:#fff;font:.8rem "Permanent Marker";padding:.3rem .6rem;border-radius:50%;transform:rotate(12deg)}
.card button{font-family:"Special Elite";background:var(--char);color:var(--off);border:0;padding:.4rem .9rem;cursor:pointer}
.about{padding:4rem 5vw;background:var(--denim);background-image:repeating-linear-gradient(45deg,#ffffff0d 0 2px,transparent 2px 6px)}
.paper{max-width:720px;margin:auto;background:var(--off);color:var(--char);padding:2rem 2.5rem;transform:rotate(-1deg);box-shadow:8px 8px 0 var(--char);font-family:"Special Elite";clip-path:polygon(0 2%,6% 0,20% 2%,40% 0,60% 2%,80% 0,100% 1%,99% 98%,85% 100%,60% 98%,40% 100%,15% 98%,0 100%)}
.paper h2{font-size:2.6rem;margin:0}.marker{font-family:"Permanent Marker";font-size:1.5rem;color:var(--rust)}
.news{padding:4rem 5vw;text-align:center}.news .stamp{color:var(--fade)}
form{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
input{font:1rem "Special Elite";padding:.7rem 1rem;min-width:260px;background:var(--off);border:3px solid var(--fade);color:#111}
.contact{padding:3rem 5vw 4rem;background:var(--char2);text-align:center;border-top:2px dashed #555}.contact h2{font-size:2.6rem;margin:0}.small{font-size:.8rem;color:#999}
footer{text-align:center;padding:1.5rem;font-family:"Special Elite";background:#111;color:#888}
@media(max-width:760px){.hero{grid-template-columns:1fr;padding-top:2rem}.hero-art{height:280px;order:2}
.menu{display:block}nav{display:none;position:absolute;top:70px;right:5vw;background:var(--char2);padding:1rem;flex-direction:column;z-index:10;border:2px solid var(--off)}nav.open{display:flex}nav a{margin:.4rem 0}.note{margin:0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.tagline{font-family:"Special Elite";font-size:clamp(1.2rem,2.5vw,1.6rem);color:var(--fade);transform:rotate(-3deg);margin:.2rem 0 1rem;border-bottom:2px dashed var(--fade);display:inline-block}