/* Scramble Tools — gritty 8-bit design system. Tokens first; everything derives from them. */
@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@500;700&family=Press+Start+2P&family=VT323&display=swap');
:root{--paper:#141516;--card:#1f2124;--deep:#0b0c0d;--ink:#ece6d8;--mute:#9a9589;--line:#3a3d41;--play:#e3542a;--work:#4e9bc4;--help:#a3c13a;--yellow:#f2c14e;--accent:var(--play);--on:#141516;--tint:#1b1c1e;
  --display:"Pixelify Sans","Press Start 2P",monospace;--pixel:"Press Start 2P","Pixelify Sans",monospace;--body:"VT323","Courier New",monospace;--px:4px;--pad:clamp(16px,4vw,48px);color-scheme:dark}
body[data-section="play"]{--accent:var(--play);--tint:color-mix(in srgb,var(--play) 9%,var(--paper))}body[data-section="work"]{--accent:var(--work);--tint:color-mix(in srgb,var(--work) 9%,var(--paper))}body[data-section="help"]{--accent:var(--help);--tint:color-mix(in srgb,var(--help) 9%,var(--paper))}
*{box-sizing:border-box}html{overflow-x:clip;scroll-behavior:smooth}
body{margin:0;overflow-x:clip;color:var(--ink);font:22px/1.35 var(--body);background-color:var(--paper);background-image:linear-gradient(var(--tint) 1px,transparent 1px),linear-gradient(90deg,var(--tint) 1px,transparent 1px);background-size:32px 32px}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.11;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 4px),radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55) 100%)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}a{color:inherit}img{max-width:100%;display:block}h1,h2,h3{text-wrap:balance}
::selection{background:var(--yellow);color:#141516}
:focus-visible{outline:var(--px) solid var(--yellow);outline-offset:2px}
#app{padding-inline:var(--pad);padding-block:0 60px}
.pixel{font:10px/1 var(--pixel);text-transform:uppercase}
/* header */
.site-header{position:relative;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"brand nav cart";align-items:center;gap:12px 16px;padding:14px 0}
.brand{grid-area:brand;display:flex;align-items:center;width:clamp(150px,16vw,230px);transition:transform .35s cubic-bezier(.3,1.5,.4,1)}.brand:hover{transform:rotate(-2deg) scale(1.03)}.brand img{width:100%;height:auto}
.stamps{grid-area:nav;display:flex;flex-wrap:wrap;gap:10px}
.stamp{display:inline-block;padding:12px 16px 10px;border:var(--px) solid var(--line);box-shadow:var(--px) var(--px) 0 var(--deep);font:11px/1 var(--pixel);text-transform:uppercase;background:var(--card);color:var(--ink);text-decoration:none;transition:transform .08s}
.stamp:hover{background:var(--yellow);color:#141516}.stamp:active{transform:translate(var(--px),var(--px));box-shadow:0 0 0 var(--deep)}
.stamp.active,.stamp[aria-current="page"]{background:var(--accent);color:var(--on)}
.header-actions{grid-area:cart;display:flex;justify-content:flex-end}
.cart-toggle{display:flex;align-items:center;gap:10px;padding:10px 14px 9px 10px;border:var(--px) solid var(--line);box-shadow:var(--px) var(--px) 0 var(--deep);background:var(--card);color:var(--ink);font:11px/1 var(--pixel);text-transform:uppercase;transition:transform .08s;text-decoration:none}
.cart-toggle:active{transform:translate(var(--px),var(--px));box-shadow:none}.cart-toggle.bump{animation:bump .4s ease-in-out}@keyframes bump{50%{transform:scale(1.15) rotate(-3deg)}}
.cart-toggle [data-cart-count]{display:grid;place-items:center;min-width:26px;height:26px;padding:0 6px;background:var(--accent);color:var(--on);font:12px/1 var(--pixel)}
.menu-button{display:none}
/* buttons */
.button{display:inline-flex;align-items:center;gap:10px;padding:14px 18px 12px;border:var(--px) solid var(--line);box-shadow:var(--px) var(--px) 0 var(--deep);font:11px/1 var(--pixel);text-transform:uppercase;text-decoration:none;background:var(--card);color:var(--ink);transition:transform .08s;cursor:pointer}
.button:hover{background:var(--yellow);color:#141516}.button:active{transform:translate(var(--px),var(--px));box-shadow:none}
.button.solid{background:var(--accent);color:var(--on)}.button.solid:hover{background:var(--yellow);color:#141516}
.button.outline{background:transparent}.button:disabled,.button[disabled]{opacity:.55;cursor:default;transform:none}
.text-link{font:11px/1 var(--pixel);text-transform:uppercase;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:3px}
.badge{display:inline-block;background:var(--yellow);color:#141516;font:9px/1 var(--pixel);padding:7px 8px 6px;border:var(--px) solid var(--line);box-shadow:var(--px) var(--px) 0 var(--deep);text-transform:uppercase}
.badge.blink{isolation:isolate}.badge.blink::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);opacity:0;animation:blink 1.2s steps(2) infinite}@keyframes blink{50%{opacity:1}}
/* reveal */
.reveal{animation:rise .45s cubic-bezier(.2,.8,.2,1) backwards}@keyframes rise{from{translate:0 12px}}
/* home */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(16px,4vw,48px);align-items:center;padding-block:clamp(18px,4vh,48px) clamp(12px,3vh,32px);min-height:min(78vh,760px)}
.hero h1{font:700 clamp(2.4rem,6.4vw,5.6rem)/1 var(--display);margin:0 0 18px;text-shadow:var(--px) var(--px) 0 var(--accent)}
.hero h1 em{font-style:normal;color:var(--accent);text-shadow:var(--px) var(--px) 0 var(--deep);display:inline-block;animation:wobble 2s ease-in-out infinite}@keyframes wobble{50%{transform:translateY(-4px)}}
.hero h1 .word{white-space:nowrap;display:inline-block}.hero h1 .ch{display:inline-block;animation:drop .5s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(var(--i) * 30ms)}@keyframes drop{from{opacity:0;transform:translateY(-32px)}}
.hero .intro{max-width:40ch;font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.25;margin:0 0 22px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.pile-wrap{display:grid;gap:14px}
.pile{position:relative;aspect-ratio:1/.9;max-width:100%}
/* Stickers move only by transforms, one layer each, so the GPU runs every motion at full frame rate:
   the sticker carries position and turn (set by the script), .float the idle bob, .skin the hover zoom and lean. */
.sticker{position:absolute;left:0;top:0;width:46%;z-index:var(--z,0);cursor:grab;touch-action:none;user-select:none;will-change:transform;transition:transform .7s cubic-bezier(.3,1.3,.4,1)}
.sticker .float{display:block}
.pile:not(.tidy) .sticker .float{animation:bob 5.5s ease-in-out infinite;animation-delay:var(--d,0s)}@keyframes bob{50%{transform:translateY(-10px)}}
.sticker .skin{display:block;position:relative;background:var(--card);padding:8px 8px 12px;border:var(--px) solid var(--line);box-shadow:6px 6px 0 var(--deep);transform:rotate(var(--lean,0deg)) scale(var(--s,1));transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.sticker:hover,.sticker:focus-visible{z-index:40}.sticker:hover .skin,.sticker:focus-visible .skin{--s:1.06}
.sticker.drag{transition:none;cursor:grabbing;z-index:50}.sticker.drag .skin{box-shadow:12px 12px 0 var(--deep)}.sticker.drag .float{animation-play-state:paused}
.pile.snap .sticker{transition:none}
.sticker img{aspect-ratio:4/3;object-fit:cover;width:100%;border:var(--px) solid var(--line)}
.sticker .lab{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 2px 0;font:10px/1.4 var(--pixel)}.sticker .lab small{font:20px/1 var(--body);color:var(--accent);white-space:nowrap}
.sticker .badge{position:absolute;z-index:3;top:-14px;right:-14px}
.pile.tidy{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;aspect-ratio:auto}
.pile.tidy .sticker{position:relative;width:auto}
.pile-tools{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}.pile-tools p{margin:0;color:var(--mute);font-size:19px}
.pile-tools button{font:10px/1 var(--pixel);text-transform:uppercase;padding:10px 12px 9px;border:var(--px) solid var(--line);box-shadow:var(--px) var(--px) 0 var(--deep);background:var(--card)}.pile-tools button:hover{background:var(--yellow);color:#141516}.pile-tools button:active{transform:translate(var(--px),var(--px));box-shadow:none}
.marquee{overflow:hidden;border-block:var(--px) solid var(--line);margin:24px calc(-1 * var(--pad)) 0;padding:14px 0;white-space:nowrap;background:var(--card)}
.marquee div{display:inline-block;animation:slide 32s linear infinite;font:14px/1 var(--pixel);text-transform:uppercase}@keyframes slide{to{transform:translateX(-50%)}}.marquee span{margin:0 1.4em;color:var(--mute)}.marquee span.n{color:var(--accent)}
.marquee:hover div{animation-play-state:paused}.marquee a{text-decoration:none}.marquee a:hover{color:#141516;background:var(--yellow)}
/* sections */
.sec-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:16px clamp(20px,4vw,56px);padding-block:clamp(16px,4vh,40px) 10px}
.sec-head h1,.sec-head h2{font:700 clamp(2.6rem,8vw,6.5rem)/1 var(--display);margin:0;color:var(--accent);text-shadow:var(--px) var(--px) 0 var(--deep)}
.sec-head p{margin:0 0 .35em;font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.2;max-width:34ch}
.sec-head p::after{content:"▮";color:var(--accent);margin-left:.15em;animation:cursor 1s steps(2) infinite}@keyframes cursor{50%{opacity:0}}
.subhead{display:flex;align-items:baseline;gap:12px;margin:28px 0 16px;font:12px/1 var(--pixel);text-transform:uppercase}.subhead::after{content:"";flex:1;height:var(--px);background:var(--line)}.subhead small{font:18px/1 var(--body);color:var(--mute);text-transform:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(18px,2.4vw,28px)}
.grid.apps{grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr))}
.tile{background:var(--card);padding:10px;border:var(--px) solid var(--line);box-shadow:6px 6px 0 var(--deep);transition:transform .2s;position:relative;text-align:left}
.tile:hover{box-shadow:10px 10px 0 var(--accent)}
.tile .pic{position:relative;overflow:hidden;border:var(--px) solid var(--line);display:block;padding:0;width:100%;cursor:pointer}.tile img{aspect-ratio:4/3;object-fit:cover;width:100%}.tile .pic img+img{position:absolute;inset:0;opacity:0;transition:opacity .25s ease}.tile:hover .pic img+img{opacity:1}
.tile h3{font:700 1.5rem/1 var(--display);margin:14px 4px 6px}.tile h3 a{text-decoration:none}.tile h3 a:hover{color:var(--accent)}.tile p{margin:0 4px 12px;color:var(--mute);font-size:19px;line-height:1.2}
.tile .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 4px 2px}
.tag{display:inline-block;padding:6px 8px 5px;background:var(--accent);color:var(--on);font:11px/1 var(--pixel);border:var(--px) solid var(--line);box-shadow:var(--px) var(--px) 0 var(--deep);transition:transform .2s ease-out}.tile:hover .tag{transform:translate(-2px,-2px)}
.tile .badge{position:absolute;z-index:3;top:-12px;left:-12px}
.empty{padding:24px 0;color:var(--mute)}
.app{border:var(--px) solid var(--line);box-shadow:6px 6px 0 var(--deep);padding:18px;display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:start;background:var(--card);transition:transform .15s;position:relative}
.app:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--accent)}
.app.soon{border-style:dashed;box-shadow:none;background:color-mix(in srgb,var(--card) 70%,transparent)}.app.soon:hover{transform:none;box-shadow:none;background:var(--card)}
.app .mono{width:72px;height:72px;display:grid;place-items:center;background:var(--accent);color:var(--on);font:28px/1 var(--pixel);border:var(--px) solid var(--line);box-shadow:var(--px) var(--px) 0 var(--deep)}
.app .mono.img{background:var(--card);overflow:hidden;padding:4px}.app .mono.img img{width:100%;height:100%}
.app .mono.glyph{padding:12px}.app .mono.glyph img{width:100%;height:100%;image-rendering:pixelated;transition:transform .3s ease-out}.app:hover .mono.glyph img{transform:translateY(-2px)}
.app h3{font:700 1.6rem/1 var(--display);margin:0 0 6px}.app .tl{margin:0 0 6px;font-size:21px;color:var(--accent)}.app p{margin:0 0 12px;color:var(--mute);font-size:19px;line-height:1.2}
.app .badge{position:absolute;top:-12px;right:-12px;background:var(--help)}
.app .row{display:flex;gap:10px;flex-wrap:wrap}.app .button{padding:10px 12px 9px;font-size:10px}.app .platforms{cursor:default;background:var(--paper);color:var(--mute);box-shadow:none;padding:7px 12px 6px;line-height:1.6}.app .platforms:hover{background:var(--paper);color:var(--mute)}
/* product sheet */
.sheet{position:fixed;left:0;right:0;bottom:0;top:max(24px,6vh);z-index:30;background:var(--card);border-top:var(--px) solid var(--line);box-shadow:0 -8px 0 var(--accent);transform:translateY(104%);transition:transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s;display:grid;grid-template-rows:auto 1fr;overflow:hidden;visibility:hidden}
.sheet.on{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.2,.8,.2,1)}.sheet .bar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:var(--px) solid var(--line)}.sheet .bar span{font:11px/1 var(--pixel);text-transform:uppercase;color:var(--mute)}
.sheet .body{overflow:auto;padding:20px var(--pad) 60px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:clamp(16px,3vw,40px)}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start;justify-content:start}.shots img{width:100%;aspect-ratio:4/3;object-fit:cover;border:var(--px) solid var(--line);box-shadow:var(--px) var(--px) 0 var(--deep);background:repeating-linear-gradient(45deg,var(--card) 0 8px,var(--deep) 8px 16px);opacity:.6;animation:loading .9s ease-in-out infinite alternate;transition:opacity .3s ease-out}.shots img.ready{animation:none;opacity:1}@keyframes loading{to{opacity:.3}}
.detail h1{font:700 clamp(2rem,5vw,4rem)/1 var(--display);margin:0 0 10px;text-shadow:var(--px) var(--px) 0 var(--accent)}.detail .sub{font-size:1.5rem;line-height:1.2;margin:0 0 10px}.detail .desc{color:var(--mute);margin:0 0 18px;font-size:20px;line-height:1.25}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}.chips span,.chips a{padding:7px 10px 6px;border:var(--px) solid var(--line);font:9px/1 var(--pixel);text-transform:uppercase;background:var(--paper);text-decoration:none}.chips a:hover{background:var(--yellow);color:#141516}
.bigprice{font:700 2.6rem/1 var(--display);color:var(--accent);text-shadow:var(--px) var(--px) 0 var(--deep);margin:0 0 16px}
.nextprev{display:flex;gap:10px;margin-top:22px}.nextprev a{flex:1;padding:12px;border:var(--px) solid var(--line);box-shadow:var(--px) var(--px) 0 var(--deep);background:var(--card);text-align:left;font:19px/1.2 var(--body);text-decoration:none}.nextprev a:hover{background:var(--yellow);color:#141516}.nextprev a.next{text-align:right}.nextprev small{display:block;font:9px/1 var(--pixel);text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.shots img{cursor:zoom-in}.shots img:hover{box-shadow:6px 6px 0 var(--accent)}
.lightbox{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:clamp(16px,4vw,56px);background:rgba(11,12,13,.92);opacity:0;visibility:hidden;transition:opacity .2s ease-out,visibility 0s .2s}
.lightbox.on{opacity:1;visibility:visible;transition:opacity .2s ease-out}
.lightbox figure{margin:0;display:grid;gap:12px;justify-items:center;max-width:min(1200px,100%)}
.lightbox img{max-width:100%;max-height:calc(100vh - 140px);object-fit:contain;border:var(--px) solid var(--line);box-shadow:8px 8px 0 var(--accent);background:var(--deep);user-select:none;-webkit-user-drag:none}
.lightbox figcaption{font:10px/1 var(--pixel);text-transform:uppercase;color:var(--mute)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:64px;border:var(--px) solid var(--line);box-shadow:var(--px) var(--px) 0 var(--deep);background:var(--card);font:16px/1 var(--pixel)}.lb-nav:hover{background:var(--yellow);color:#141516}.lb-nav:active{transform:translateY(-50%) translate(var(--px),var(--px));box-shadow:none}
.lb-prev{left:clamp(8px,2vw,24px)}.lb-next{right:clamp(8px,2vw,24px)}.lb-close{position:absolute;top:clamp(8px,2vw,24px);right:clamp(8px,2vw,24px)}
.closebtn{width:40px;height:40px;border:var(--px) solid var(--line);box-shadow:var(--px) var(--px) 0 var(--deep);font:14px/1 var(--pixel);background:var(--card)}.closebtn:active{transform:translate(var(--px),var(--px));box-shadow:none}
.sheet-open{overflow:hidden}
/* basket tray */
.cart-panel{position:fixed;left:50%;bottom:16px;transform:translate(-50%,140%);width:min(560px,calc(100% - 32px));z-index:40;background:var(--card);color:var(--ink);border:var(--px) solid var(--line);box-shadow:8px 8px 0 var(--accent);padding:16px;transition:transform .4s cubic-bezier(.2,.8,.2,1),visibility 0s .4s;max-height:80vh;display:grid;grid-template-rows:auto 1fr;gap:12px;visibility:hidden}
.cart-open .cart-panel{transform:translate(-50%,0);visibility:visible;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.cart-head{display:flex;justify-content:space-between;align-items:center}.cart-head p{margin:0;font:12px/1 var(--pixel);text-transform:uppercase}.cart-close{font:12px/1 var(--pixel);width:32px;height:32px;border:var(--px) solid var(--line)}
.cart-content{overflow:auto;display:grid;gap:8px;align-content:start}
.cart-item{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:var(--deep);border:var(--px) solid var(--line);padding:10px 12px;animation:rise .3s cubic-bezier(.2,.8,.2,1)}
.cart-item strong{display:block;font:700 1.2rem/1 var(--display)}.cart-item small{display:block;color:var(--mute);font-size:18px;margin-top:4px}
.quantity{display:flex;gap:8px;align-items:center;font:20px/1 var(--body)}.quantity button{width:28px;height:28px;border:var(--px) solid var(--line);background:var(--card);font:10px/1 var(--pixel)}.quantity button:hover{background:var(--yellow);color:#141516}.quantity button:disabled{opacity:.4}
.cart-empty{margin:0;color:var(--mute);font-size:19px}
.checkout-button{justify-content:center;width:100%;margin-top:6px}.checkout-status{margin:0;font-size:18px;color:var(--yellow);min-height:1em}
.cart-backdrop{position:fixed;inset:0;z-index:35;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s .2s}.cart-open .cart-backdrop{opacity:1;visibility:visible;transition:opacity .2s ease}
.fly{position:fixed;left:0;top:0;z-index:70;pointer-events:none;object-fit:cover;border:var(--px) solid var(--line);transform-origin:0 0}
.burst{position:fixed;inset:0;pointer-events:none;z-index:60}
.toast{position:fixed;left:50%;top:14px;transform:translate(-50%,-30px);z-index:60;background:var(--yellow);color:#141516;padding:10px 14px 9px;border:var(--px) solid var(--line);box-shadow:var(--px) var(--px) 0 var(--deep);font:10px/1 var(--pixel);text-transform:uppercase;opacity:0;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1);pointer-events:none}.toast.on{opacity:1;transform:translate(-50%,0)}
/* help */
.helpwrap{display:grid;gap:16px;max-width:900px}
.search{display:flex;gap:12px;align-items:center;padding:12px 16px;border:var(--px) solid var(--line);box-shadow:var(--px) var(--px) 0 var(--deep);background:var(--card);font:20px/1 var(--body)}.search input{flex:1;border:0;background:none;font:inherit;color:inherit;outline:none;min-width:0}.search span{font:12px/1 var(--pixel);color:var(--accent)}
.acc{background:var(--card);border:var(--px) solid var(--line);box-shadow:6px 6px 0 var(--deep)}.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;font:700 1.5rem/1 var(--display)}.acc summary::-webkit-details-marker{display:none}.acc summary::after{content:"+";font:14px/1 var(--pixel);color:var(--accent)}.acc[open] summary::after{content:"-"}
.acc .inner{padding:0 20px 18px;color:var(--mute);font-size:20px;line-height:1.25}.acc .inner>p{margin:0 0 8px}.acc a,.acc .it{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:2px dashed var(--line);text-decoration:none;color:var(--ink)}.acc a:hover b{color:var(--accent)}.acc small{color:var(--mute);font-size:18px;display:block}.acc .go{color:var(--accent);flex:none}
.callout{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding:20px;border:var(--px) solid var(--line);box-shadow:6px 6px 0 var(--accent);background:var(--card)}.callout h2{font:700 1.6rem/1 var(--display);margin:0 0 6px}.callout p{margin:0;color:var(--mute);font-size:20px}
/* prose pages: why, legal, contact */
.prose{max-width:72ch;display:grid;gap:18px}.prose section{background:var(--card);border:var(--px) solid var(--line);box-shadow:6px 6px 0 var(--deep);padding:18px 20px}.prose h2{font:700 1.5rem/1 var(--display);margin:0 0 10px}.prose p{margin:0 0 10px;font-size:20px;line-height:1.3;color:var(--ink)}.prose p:last-child{margin:0}.prose .kicker{font:9px/1 var(--pixel);text-transform:uppercase;color:var(--accent);display:block;margin-bottom:10px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:start}
form.pixel-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}form.pixel-form label{display:grid;gap:6px;font:9px/1 var(--pixel);text-transform:uppercase}form.pixel-form label.wide,form.pixel-form .button,form.pixel-form .form-status{grid-column:1/-1}
input,textarea,select{font:20px/1.2 var(--body);color:var(--ink);background:var(--deep);border:var(--px) solid var(--line);padding:10px 12px;border-radius:0;width:100%}textarea{resize:vertical;min-height:140px}input:focus,textarea:focus,select:focus{outline:var(--px) solid var(--yellow);outline-offset:0}
.form-status{margin:0;color:var(--yellow);font-size:19px;min-height:1.2em}
.contact-aside{display:grid;gap:14px;border:var(--px) dashed var(--line);padding:18px}.contact-aside p{margin:0;font-size:20px;color:var(--mute)}.contact-email-image{width:310px;max-width:100%}
.contact-response{position:absolute;width:0;height:0;border:0;opacity:0}
/* checkout result + 404 */
.checkout-result{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:18px;padding-block:40px}.checkout-result img{width:min(260px,60vw)}.checkout-result p{margin:0;font-size:22px}
.not-found{margin-top:16px}
/* footer */
.site-footer{margin-top:60px;padding-top:24px;border-top:var(--px) solid var(--line);display:grid;gap:18px}
.footer-lead{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;font:700 1.6rem/1 var(--display)}
.footer-grid{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;color:var(--mute);font-size:19px}.footer-grid img{width:140px}.footer-links{display:flex;flex-wrap:wrap;gap:8px}.footer-links a{font:9px/1 var(--pixel);text-transform:uppercase;text-decoration:none;padding:8px 10px 7px;border:var(--px) solid var(--line)}.footer-links a:hover{background:var(--yellow);color:#141516}
/* responsive */
@media (max-width:900px){.hero{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr}}
@media (max-width:760px){.site-header{grid-template-columns:1fr auto;grid-template-areas:"brand cart" "nav nav"}.stamps{gap:8px}.stamp{padding:11px 12px 9px;font-size:10px}.pile{aspect-ratio:1/1}.sticker{width:58%}.sheet .body{grid-template-columns:1fr}.sec-head{grid-template-columns:1fr}form.pixel-form{grid-template-columns:1fr}form.pixel-form label{grid-column:1!important}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}