:root{--bg:#050805;--panel:#0c140c;--g:#39ff6a;--gd:#8fe3a3;--txt:#e6f5e9;--red:#ff4d4d;--chrome:#c9d1d9;--mut:#a9c2ae}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);font:17px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
a{color:var(--g)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--g);color:#000;padding:6px;z-index:9}
header{position:sticky;top:0;z-index:5;background:#050805ee;border-bottom:1px solid #1d3a22}
.bar{max-width:1100px;margin:auto;display:flex;align-items:center;gap:16px;padding:10px 18px;flex-wrap:wrap}
.logo{font-weight:800;color:var(--g);text-decoration:none;letter-spacing:.04em}.logo span{color:var(--chrome)}
nav ul{list-style:none;display:flex;gap:14px;margin:0;padding:0;flex-wrap:wrap}nav a{text-decoration:none;color:var(--gd)}nav a[aria-current]{color:var(--g);text-decoration:underline}
.menu{display:none;margin-left:auto;background:none;border:1px solid var(--g);color:var(--g);font:inherit;padding:4px 10px}
main{max-width:1100px;margin:auto;padding:24px 18px 60px}
h1,h2,h3{line-height:1.2;color:#fff}h1{font-size:clamp(2rem,6vw,3.6rem);margin:.2em 0}
.g{color:var(--g)}.r{color:var(--red)}.mut{color:var(--mut)}
.hero{position:relative;min-height:62vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;border:1px solid #1d3a22;padding:30px;background:#000}
#rain{position:absolute;inset:0;width:100%;height:100%;opacity:.35}.hero>*:not(canvas){position:relative}
.btn{display:inline-block;background:var(--g);color:#000;font:inherit;font-weight:700;border:0;padding:10px 18px;text-decoration:none;cursor:pointer;margin:4px 8px 4px 0}
.btn.alt{background:none;color:var(--g);border:1px solid var(--g)}.btn.red{background:var(--red);color:#000}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:20px 0}
.card{background:var(--panel);border:1px solid #1d3a22;padding:18px;position:relative}
.card img{width:100%;height:auto;display:block;background:#000}
.price{font-size:1.6rem;color:var(--g);font-weight:800}.joke{color:var(--red);font-size:.9rem}
.hud{position:relative;overflow:hidden}.hud::after{content:"";position:absolute;left:0;right:0;height:3px;background:var(--red);box-shadow:0 0 12px var(--red);animation:scan 3s linear infinite;top:0}
@keyframes scan{to{top:100%}}
.status{font-size:.85rem;border-top:1px dashed #2c5a35;margin-top:10px;padding-top:8px}.status b{color:var(--g)}
.chrome{background:linear-gradient(180deg,#f5f7fa,#9aa4ad 50%,#e3e7eb);-webkit-background-clip:text;background-clip:text;color:transparent}
label{display:block;margin:8px 0 2px}select,input{font:inherit;background:#000;color:var(--txt);border:1px solid var(--g);padding:6px}
footer{border-top:1px solid #1d3a22;padding:20px 18px;font-size:.9rem;color:var(--mut);max-width:1100px;margin:auto}footer a{margin-right:12px}
dialog{background:var(--panel);color:var(--txt);border:2px solid var(--red);max-width:440px}dialog::backdrop{background:#000c}
ol.steps li{margin:12px 0}
@media(max-width:720px){.menu{display:block}nav{width:100%;display:none}nav.open{display:block}nav ul{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}#rain{display:none}}
details{margin-top:10px}summary{cursor:pointer;color:var(--g)}dd{margin:0 0 8px}dt{margin-top:6px}
.pv{display:inline-block;vertical-align:middle;margin-left:6px;font-size:.8rem;font-weight:700;color:var(--txt);border:1px solid var(--mut);padding:0 6px;letter-spacing:0}
.ph{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:#000;border:1px dashed #2c5a35;color:var(--g);font-size:2rem;font-weight:800}
.code{background:#000;border:1px solid #1d3a22;color:var(--txt);padding:14px;overflow-x:auto;font-size:.9rem}
.logo{display:inline-flex;align-items:center;line-height:0}.logo img{display:block;height:40px;width:auto;max-width:100%}
@media(max-width:420px){.logo{flex:1 1 0;min-width:0}.logo img{height:auto;max-height:40px}}
.aigen{color:#e6f5e9;font-size:.85rem;margin-top:6px}
/* Clause C1/C3 (2026-10-21) */
.disc{color:var(--txt);border-left:3px solid var(--g);padding:4px 10px;margin:8px 0;font-size:.95rem}
.pv.planned{display:inline-block;margin:6px 0 0}
.ph.mi{background:#f4f1ea;border-style:solid;overflow:hidden}.ph.mi img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* merch: inactive Coming soon label (Clause R-025) */
.soon{display:inline-block;border:1px dashed currentColor;padding:.4em .8em;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.disc{font-size:.9em}
@media (max-width:600px){.soon{font-size:1.15em;padding:.5em 1em}}

/* a11y 1916 */.card h2.ch{font-size:1.17em;margin:.6em 0 .3em}.skip:focus-visible{outline:3px solid #fff}button:disabled,input:disabled{cursor:not-allowed;opacity:.75}

/* a11y2 2026-10-21: WCAG 1.4.10 reflow - long URLs in policy text wrap at 320-390px */
main a,main p,main li{overflow-wrap:anywhere}
.pv.soon{font-size:.9rem;color:var(--txt);border-color:var(--g)}

a.buy{display:inline-block;background:var(--g);color:#000;font-weight:800;padding:.6rem 1.1rem;border-radius:4px;text-decoration:none;margin:.3rem .3rem 0 0}a.buy[hidden]{display:none}

/* bag mockups, gallery, intro (mockups3d) */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.card img[src*="assets/bags/"]{background:transparent}
.lineup{display:flex;justify-content:center;align-items:flex-end;gap:0;margin:1.25rem auto .5rem;max-width:660px;width:100%}
.lineup img{width:33.3%;max-width:220px;height:auto;filter:drop-shadow(0 12px 18px rgba(0,0,0,.6))}
.lineup img:nth-child(2){transform:scale(1.08);z-index:1}
.lineup.sm{max-width:540px;margin:1rem 0}
.gift img{max-width:240px;margin:0 auto 1rem}
.gal-thumbs{display:flex;gap:.5rem;margin:.5rem 0 1rem}
.gal-t{background:#000;border:2px solid #2c5a35;padding:2px;cursor:pointer;min-width:44px;min-height:44px;line-height:0}
.gal-t[aria-pressed="true"]{border-color:var(--g)}
.gal-t:focus-visible{outline:3px solid var(--g);outline-offset:2px}
.card .gal-t img{width:64px;height:80px;background:transparent}
.intro{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.94);pointer-events:none;perspective:900px;transition:opacity .3s}
.intro.out{opacity:0}
.intro p{color:var(--g);font-family:monospace;margin-top:2.5rem;text-align:center}
.intro p span{display:block;color:#c9d1d9;font-size:.8rem;margin-top:.4rem}
.cube{position:relative;width:120px;height:317px;transform-style:preserve-3d;animation:aaspin 1.8s cubic-bezier(.4,.1,.3,1) forwards}
.cube i{position:absolute;top:0;left:0;height:317px;background-size:100% 100%;backface-visibility:hidden}
.cube .fr,.cube .bk{width:120px}
.cube .fr{transform:translateZ(47px);background-image:url(../assets/intro/stable-release-front.webp)}
.cube .bk{transform:rotateY(180deg) translateZ(47px);background-image:url(../assets/intro/stable-release-back.webp)}
.cube .sl,.cube .sr{width:94px;left:13px;background-image:url(../assets/intro/stable-release-side.webp)}
.cube .sl{transform:rotateY(-90deg) translateZ(60px)}
.cube .sr{transform:rotateY(90deg) translateZ(60px)}
.cube .tp,.cube .bt{width:120px;height:94px;top:111.5px;background:#0a0f0b}
.cube .tp{transform:rotateX(90deg) translateZ(158.5px)}
.cube .bt{transform:rotateX(-90deg) translateZ(158.5px)}
@keyframes aaspin{from{transform:rotateX(-12deg) rotateY(-200deg)}to{transform:rotateX(-12deg) rotateY(-25deg)}}
@media (prefers-reduced-motion: reduce){.intro{display:none}.cube{animation:none}}
.sold{font-size:1.6rem;font-weight:700;line-height:1.35;color:var(--txt);margin:1rem 0}
.sold a{color:var(--g)}
.gal{max-width:360px;margin:0 auto}
.gal-img[hidden]{display:none}

/* shop: Matrix-homage loader + CSS-3D bags (shop3d) */
.mxl{position:fixed;inset:0;z-index:60;background:#050805;pointer-events:none;transition:opacity .45s,filter .45s}
.mxl canvas{display:block}
.mxl.out{opacity:0;filter:blur(6px)}
.mxl.rm{display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .25s}
.mxl.rm.out{filter:none}
.mxl-wm{font-size:2.4rem;font-weight:800;color:#e6f5e9;margin:0}
.mxl-l{color:var(--g);margin:.5rem 0 0}
.b3{position:relative}
.b3.on>img{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* Coffee carton (js/carton-3d.js): WebGL canvas drawn at device pixel ratio; no CSS transforms, filters or will-change on it. */
.b3-scene{position:relative;display:block;height:380px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;background:radial-gradient(ellipse at 50% 62%,#10241a 0,#000 70%)}
.b3-scene:active{cursor:grabbing}
.b3-scene:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #39ff6a}
.b3-scene canvas{display:block;width:100%;height:100%}
.b3-hint{position:absolute;right:8px;bottom:6px;display:block;line-height:0;color:#b9c9bd;background:rgba(5,8,5,.85);padding:3px;border-radius:3px;pointer-events:none}.b3-hint svg{display:block}.b3-scene canvas{touch-action:pan-y}
@media (min-width:700px){.b3-scene{height:420px}}

/* merch spec blocks (listing-copy.md) */
details.specs{margin:.6rem 0;border:1px solid var(--line,#2a3a2e);padding:.4rem .7rem}
details.specs summary{cursor:pointer;font-weight:700;color:var(--g)}
details.specs h4{margin:.7rem 0 .2rem;font-size:1rem}
.specl{margin:.2rem 0 .4rem 1.1rem;padding:0}
pre.spec{white-space:pre-wrap;word-break:break-word;background:#050806;color:var(--txt);border:1px solid var(--g);padding:.6rem;font-size:.82rem;line-height:1.45;overflow:auto;max-height:22rem}
pre.spec:focus-visible{outline:2px solid var(--g);outline-offset:2px}
table.sz{border-collapse:collapse;margin:.3rem 0;font-size:.9rem}
table.sz caption{text-align:left;font-weight:700;padding-bottom:.2rem}
table.sz th,table.sz td{border:1px solid var(--line,#2a3a2e);padding:.2rem .45rem;text-align:center}

/* team headshots */
.card .head{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:#050805;border:1px solid #1d3a22;margin-bottom:10px}.bio{font-size:.95rem}.prompt{color:var(--g);font-size:.8rem;overflow-wrap:anywhere}

/* P-2 renewal terms + inert consent; merch placeholders */
.renew{font-size:1.6rem;line-height:1.35;color:var(--txt);margin:.6rem 0}
.renew a{color:var(--g)}
.consent{font-size:1rem;color:var(--txt)}
.consent input{width:1.2rem;height:1.2rem;vertical-align:middle}
.ph.wip{background:#0c140c;color:var(--txt);font-size:1.1rem;letter-spacing:.08em}
.ph.mi.sq{aspect-ratio:1/1}
.gal.mi{background:#f4f1ea;padding:8px}
.origin{font-weight:700;color:var(--txt)}
.rline{color:var(--txt);font-size:.95rem}

a.buy.off{opacity:.55;cursor:not-allowed}

p.ship{color:var(--txt);font-size:.95rem}
figure.gal-img{margin:0}figure.gal-img figcaption{font-size:.85rem;padding:.4rem 0 0;color:#333}

footer .fine{font-size:.75rem;font-weight:400;opacity:.7;margin-top:.5rem}
