/* ASH KROW — paste-up system */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');
:root{--paper:#e7e3d8;--tape:#dbd5c6;--ink:#0a0a0b;--ink60:#57544e;--hi:oklch(58% .19 32);--pad:12px}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Archivo',Helvetica,sans-serif;font-size:15px;line-height:1.5;overflow-x:hidden;text-wrap:pretty;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
body:before{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;mix-blend-mode:multiply;opacity:.5;background:radial-gradient(120% 90% at 50% -10%,transparent 58%,rgba(10,10,11,.15)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='.3'/%3E%3C/svg%3E")}
img{display:block;width:100%;height:auto}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--hi)}
:focus-visible{outline:3px solid var(--hi);outline-offset:2px}
::selection{background:var(--ink);color:var(--paper)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:'Space Mono',ui-monospace,monospace}
.lbl{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink60)}
h1,h2,h3,.blk{font-family:'Archivo Black','Archivo',sans-serif;font-weight:400;text-transform:uppercase;line-height:.86;letter-spacing:-.038em}
.grey{filter:grayscale(1) contrast(1.2)}
/* ---------- bar ---------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:120;height:48px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 12px}
.bar a{color:var(--paper)}.bar a:hover{color:var(--hi)}
.bar .mark{font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:17px;letter-spacing:-.03em}
.bar nav{display:none;gap:2px}
.bar nav a{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:8px 11px}
.bar nav a[aria-current]{background:var(--paper);color:var(--ink)}
.menubtn{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:none;border:0;color:var(--paper);cursor:pointer;padding:8px 4px;min-height:44px}
.bagbtn{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:var(--paper);color:var(--ink);border:0;cursor:pointer;padding:0 12px;height:34px;display:flex;align-items:center}
.bagbtn.full{background:var(--hi);color:var(--paper)}
@media(min-width:900px){:root{--pad:20px}.bar{height:56px;padding:0 12px 0 20px}.bar nav{display:flex}.menubtn{display:none}.bar .mark{font-size:20px}.bagbtn{height:38px}}
main{padding-top:48px}
@media(min-width:900px){main{padding-top:56px}}
/* ---------- page head ---------- */
.phead{padding:22px var(--pad) 0}
.phead h1{font-size:clamp(40px,13vw,120px)}
.phead .sub{margin-top:12px;max-width:52ch;font-size:16px}
.crumb{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.rule{border:0;border-top:2px solid var(--ink);margin:18px 0 0}
/* ---------- bands / marquee ---------- */
.band{background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.band div{display:inline-block;animation:akslide 24s linear infinite;padding:8px 0}
.band span{font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:clamp(19px,4.6vw,34px);letter-spacing:-.02em;padding:0 16px}
.band i{font-style:normal;color:var(--hi)}
@keyframes akslide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.band div{animation:none}}
.slap{display:inline-block;background:var(--ink);color:var(--paper);font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:5px 9px;transform:rotate(-2.2deg)}
/* ---------- statement (dark) ---------- */
.state{background:var(--ink);color:var(--paper);padding:32px var(--pad) 36px;border-top:2px solid var(--ink)}
.state h2{font-size:clamp(28px,7.6vw,72px);max-width:22ch}
.state h2 i{font-style:normal;color:var(--hi)}
.state .grid{display:grid;gap:16px;margin-top:22px}
.state p{color:#c9c5bc;max-width:46ch}
.state .lbl{color:var(--hi);margin-bottom:6px}
@media(min-width:900px){.state{padding:54px var(--pad) 58px}.state .grid{grid-template-columns:repeat(3,1fr);gap:30px;margin-top:32px}}
/* ---------- product cards ---------- */
.cards{display:grid;gap:16px;padding:18px var(--pad) 26px}
.card{position:relative;display:block;background:var(--tape);border:2px solid var(--ink);color:inherit;text-align:left;transition:transform .22s,box-shadow .22s}
.card:nth-child(odd){transform:rotate(-.7deg)}
.card:nth-child(even){transform:rotate(.6deg)}
.card:hover,.card:focus-visible{transform:rotate(0) translateY(-3px);box-shadow:8px 8px 0 var(--ink);color:inherit}
.card img{aspect-ratio:1/1;object-fit:cover;border-bottom:2px solid var(--ink)}
.card .cbody{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 11px 12px}
.card h3{font-size:clamp(19px,5vw,24px)}
.card .meta{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink60);margin-top:5px}
.card .pr{font-family:'Space Mono',monospace;font-weight:700;font-size:14px;background:var(--ink);color:var(--paper);padding:5px 8px;white-space:nowrap}
.card .lot{position:absolute;left:-2px;top:-2px;background:var(--paper);border:2px solid var(--ink);font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;padding:3px 7px}
.card .sold{position:absolute;right:-2px;top:-2px;background:var(--hi);color:var(--paper);font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;border:2px solid var(--ink)}
@media(min-width:700px){.cards{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(min-width:1100px){.cards{grid-template-columns:repeat(4,1fr);gap:18px}.card img{aspect-ratio:4/5}}
/* ---------- generic blocks ---------- */
.prose{padding:20px var(--pad) 30px;max-width:66ch}
.prose p+p{margin-top:12px}
.prose h2{font-size:clamp(24px,6.4vw,44px);margin:26px 0 10px}
.prose h2:first-child{margin-top:0}
.two{display:grid;gap:20px;padding:20px var(--pad) 30px}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr;gap:34px;padding:28px var(--pad) 40px}}
.slab{border:2px solid var(--ink);background:var(--tape);padding:14px}
.slab h3{font-size:clamp(18px,4.6vw,24px);margin-bottom:8px}
table.tbl{width:100%;border-collapse:collapse;font-family:'Space Mono',monospace;font-size:12px}
table.tbl th,table.tbl td{border:1px solid var(--ink);padding:9px 8px;text-align:left;white-space:nowrap}
table.tbl th{background:var(--ink);color:var(--paper);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* ---------- buttons / forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:14px 18px;min-height:48px;cursor:pointer;width:100%}
.btn:hover{background:var(--hi);border-color:var(--hi);color:var(--paper)}
.btn.ghost{background:none;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn[disabled]{opacity:.4;cursor:not-allowed;background:none;color:var(--ink)}
.field{display:flex;border:2px solid var(--ink);background:var(--paper)}
.field input,.field textarea{flex:1;min-width:0;border:0;background:none;font-family:'Space Mono',monospace;font-size:13px;padding:14px 12px;color:inherit}
.field input:focus,.field textarea:focus{outline:2px solid var(--hi);outline-offset:-2px}
.field button{background:var(--ink);color:var(--paper);border:0;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:0 16px;min-height:48px;cursor:pointer}
.field button:hover{background:var(--hi)}
.sign{border-top:2px solid var(--ink);padding:28px var(--pad) 32px}
.sign h2{font-size:clamp(26px,7.4vw,58px);max-width:20ch}
.sign form{margin-top:16px;max-width:520px}
.sign small{display:block;margin-top:9px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink60)}
/* ---------- footer ---------- */
footer{border-top:2px solid var(--ink);padding:20px var(--pad) 40px;display:grid;gap:16px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink60)}
footer ul{list-style:none;display:grid;gap:7px}
footer b{color:var(--ink)}
@media(min-width:900px){footer{grid-template-columns:repeat(4,1fr);padding:24px var(--pad) 48px}}
/* ---------- menu overlay ---------- */
.sheet{position:fixed;inset:0;z-index:150;background:var(--ink);color:var(--paper);transform:translateY(-100%);transition:transform .4s cubic-bezier(.7,0,.2,1);display:flex;flex-direction:column;padding:8px 12px 26px;visibility:hidden}
.sheet.open{transform:none;visibility:visible}
.sheet .x{align-self:flex-end;background:var(--paper);color:var(--ink);border:0;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:11px 14px;cursor:pointer}
.sheet ul{list-style:none;margin-top:auto;display:grid;gap:2px}
.sheet a{color:var(--paper);font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:clamp(30px,11vw,60px);line-height:.98;letter-spacing:-.04em;display:flex;align-items:baseline;gap:10px}
.sheet a i{font-style:normal;font-family:'Space Mono',monospace;font-size:10px;font-weight:400;letter-spacing:.14em;color:#8d8981;text-transform:uppercase}
.sheet a:hover{color:var(--hi)}
/* ---------- bag drawer ---------- */
.scrim{position:fixed;inset:0;z-index:140;background:rgba(10,10,11,.55);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:145;background:var(--paper);border-left:2px solid var(--ink);transform:translateX(101%);transition:transform .34s cubic-bezier(.7,0,.2,1);display:flex;flex-direction:column;visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer header{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--ink);padding:12px}
.drawer header h2{font-size:22px}
.drawer .x{background:none;border:2px solid var(--ink);font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:8px 10px;cursor:pointer}
.drawer .list{flex:1;overflow-y:auto}
.drawer footer{border-top:2px solid var(--ink);display:block;padding:12px;gap:10px;color:var(--ink)}
.drawer footer .tot{display:flex;justify-content:space-between;font-family:'Space Mono',monospace;font-size:13px;font-weight:700;text-transform:uppercase;margin-bottom:10px;letter-spacing:.06em}
.li{display:grid;grid-template-columns:58px 1fr auto;gap:10px;padding:10px 12px;border-bottom:1px solid rgba(10,10,11,.2);align-items:start}
.li img{border:2px solid var(--ink);aspect-ratio:4/5;object-fit:cover}
.li h4{font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:14px;letter-spacing:-.02em;line-height:1}
.li .m{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink60);margin-top:5px}
.li .qty{display:flex;align-items:center;gap:6px;margin-top:7px}
.li .qty button{width:26px;height:26px;border:1.5px solid var(--ink);background:none;font-family:'Space Mono',monospace;font-size:13px;cursor:pointer;line-height:1}
.li .qty span{font-family:'Space Mono',monospace;font-size:12px;min-width:14px;text-align:center}
.li .pr{font-family:'Space Mono',monospace;font-size:12px;font-weight:700}
.li .rm{display:block;margin-top:8px;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink60);background:none;border:0;cursor:pointer;text-decoration:underline}
.empty{padding:26px 12px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink60)}
/* toast */
.toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);z-index:160;background:var(--ink);color:var(--paper);border:2px solid var(--ink);font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:12px 14px;display:flex;gap:14px;align-items:center;transition:transform .32s cubic-bezier(.7,0,.2,1);max-width:calc(100vw - 24px)}
.toast.show{transform:translate(-50%,0)}
.toast a{color:var(--hi);text-decoration:underline}