/* MERCH and BACK THE RECKONING (4 Oct 2026, crank W1). Both rooms ride on .library and .q-head from site.css; this file
   holds only what is new. Colours: the five innovators (--bc), gold kept for the Reckoning piece and the Patron tier. */

/* ---------- MERCH ---------- */
.mx-body{--mono:"IBM Plex Mono",ui-monospace,monospace;--plex:"IBM Plex Sans",-apple-system,system-ui,sans-serif;--disp:"Jost",Futura,sans-serif}
.mx-wait{font:14px var(--plex);color:#bdb9b0}
.mx-gate{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;max-width:880px;margin:0 0 26px;padding:22px 24px;border-radius:20px;
  background:rgba(12,13,30,.75);border:1px solid rgba(227,200,120,.35)}
.mx-gate>div{flex:1 1 300px;min-width:0}
.mx-gate b{font:600 21px var(--disp);color:#fff}.mx-gate p{margin:6px 0 0;font:15px/1.5 var(--plex);color:#bdb9b0}
.mx-you{display:grid;gap:10px;max-width:880px;margin:0 0 22px;padding:18px 20px;border-radius:18px;background:rgba(12,13,30,.6);border:1px solid rgba(255,255,255,.09)}
.mx-stats{display:flex;flex-wrap:wrap;gap:6px 22px;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#bdb9b0}
.mx-stats b{font:600 15px var(--mono);color:#fff;letter-spacing:0}
.mx-goal{font:15px/1.45 var(--plex);color:#d8d3c8}.mx-goal b{color:#fff;font-weight:600}
.mx-bar{position:relative;display:block;height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.mx-bar i{position:absolute;inset:0 auto 0 0;width:var(--p,0%);border-radius:inherit;background:linear-gradient(90deg,rgba(var(--bc,227,200,120),.6),rgb(var(--bc,227,200,120)));box-shadow:0 0 12px rgba(var(--bc,227,200,120),.55);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.mx-bar.sm{height:5px;flex:1 1 100%}

.mx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.mx-chips button{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;cursor:pointer;font:500 13px var(--plex);color:#d8d3c8;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);transition:background .2s,border-color .2s,color .2s}
.mx-chips button i{width:9px;height:9px;border-radius:50%;background:rgb(var(--bc));box-shadow:0 0 8px rgba(var(--bc),.6)}
.mx-chips button span{font:500 11px var(--mono);color:#8f8b84}
.mx-chips button:hover{border-color:rgba(var(--bc),.5)}
.mx-chips button[aria-pressed="true"]{color:#fff;background:rgba(var(--bc),.16);border-color:rgba(var(--bc),.6)}
.mx-tnote{margin:-6px 0 18px;font:15px var(--plex);color:#bdb9b0}.mx-tnote b{color:rgb(var(--bc));font-weight:600}

.mx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(14px,1.5vw,22px)}
.mx-card{position:relative;isolation:isolate;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;color:#f2efe8;
  background:radial-gradient(120% 70% at 50% 0%,rgba(var(--bc),.20),transparent 60%),linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 42%,rgba(0,0,0,.28)),rgba(12,13,16,.74);
  border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 26px 50px -30px rgba(0,0,0,.95);
  animation:blk-rise .7s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0) * 45ms);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.mx-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;background:linear-gradient(90deg,rgb(var(--bc)),rgba(var(--bc),.35) 45%,transparent 80%);box-shadow:0 0 18px rgba(var(--bc),.6)}
.mx-card.is-open:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 60px -30px rgba(var(--bc),.55)}
.mx-art{position:relative;aspect-ratio:1/1;max-height:280px;display:grid;place-items:center;padding:8px 12px 0}
.mx-art svg{width:100%;height:100%;max-width:260px;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .4s}
.mx-card.is-open:hover .mx-art svg{transform:rotate(-2deg) scale(1.03)}
.mx-card.is-locked .mx-art svg{filter:grayscale(.75) brightness(.62)}
/* W15 photos */
.mx-art img.mx-photo{width:100%;height:100%;max-width:260px;aspect-ratio:1/1;object-fit:cover;border-radius:14px;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .4s}
.mx-card.is-open:hover .mx-art img.mx-photo{transform:rotate(-1.5deg) scale(1.03)}
.mx-card.is-locked .mx-art img.mx-photo{filter:grayscale(.75) brightness(.62)}
.mx-lock{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(5,6,31,.8);border:1px solid rgba(var(--bc),.45);color:rgb(var(--bc))}
.mx-lock svg,.mx-rule svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mx-steam{animation:mx-steam 3.6s ease-in-out infinite}
@keyframes mx-steam{50%{opacity:.4;transform:translateY(-3px)}}
.mx-meta{display:flex;flex-direction:column;flex:1;padding:4px 20px 18px}
.mx-type{display:inline-flex;align-items:center;gap:7px;font:500 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgb(var(--bc))}
.mx-type i{width:7px;height:7px;border-radius:50%;background:rgb(var(--bc))}
.mx-meta h3{margin:8px 0 4px;font:600 21px/1.15 var(--disp);color:#fff}
.mx-line{margin:0;font:italic 15px/1.45 Georgia,serif;color:#d8d3c8}
.mx-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:auto;padding-top:16px}
.mx-rule{display:inline-flex;align-items:center;gap:7px;font:500 13.5px/1.35 var(--plex);color:#e6e1d6}
.mx-rule svg{flex:none;color:rgb(var(--bc))}
.mx-left{font:500 12px var(--mono);color:#8f8b84}
a.mx-badge{color:rgb(var(--bc));text-decoration:none;border-bottom:1px solid rgba(var(--bc),.4)}
.mx-res{animation:none}
.mx-free{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7fe0a8}
.mx-done{font:600 13.5px var(--plex);color:#7fe0a8}
.mx-undo{border:0;background:none;cursor:pointer;font:500 12px var(--plex);color:#8f8b84;text-decoration:underline}
.mx-size{display:flex;flex-wrap:wrap;gap:6px}
.mx-size button{min-width:42px;padding:8px 9px;border-radius:10px;cursor:pointer;font:600 12.5px var(--mono);color:#fff;background:rgba(var(--bc),.14);border:1px solid rgba(var(--bc),.5)}
.mx-size button:hover,.mx-size button:focus-visible{background:rgba(var(--bc),.35)}
.mx-fine{max-width:760px;margin:26px 0 0;font:14px/1.55 var(--plex);color:#8f8b84}.mx-fine b{color:#d8d3c8;font-weight:600}

#mx-toast{position:fixed;left:50%;bottom:32px;z-index:200;max-width:calc(100vw - 32px);translate:-50% 20px;opacity:0;padding:12px 20px;border-radius:16px;
  font:600 14.5px/1.4 "IBM Plex Sans",sans-serif;color:#12131A;background:linear-gradient(180deg,#f1dc9c,#c99a41);box-shadow:0 12px 40px rgba(0,0,0,.45);pointer-events:none;transition:opacity .3s,translate .3s}
#mx-toast.on{opacity:1;translate:-50% 0;animation:mx-toast 3.6s forwards}
@keyframes mx-toast{0%,85%{opacity:1}100%{opacity:0}}
@media (max-width:959px){#mx-toast{bottom:calc(80px + env(safe-area-inset-bottom,0px))}}
@media (max-width:560px){.mx-grid{grid-template-columns:1fr;gap:12px}
  .mx-card{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:start}
  .mx-art{aspect-ratio:auto;max-height:none;padding:12px 0 12px 8px;align-self:center}
  .mx-art svg{max-width:118px}
  .mx-lock{top:8px;right:auto;left:8px;width:26px;height:26px}.mx-lock svg{width:13px;height:13px}
  .mx-meta{padding:14px 14px 14px 6px}.mx-meta h3{font-size:18px;margin-top:6px}.mx-line{font-size:14px}
  .mx-type{font-size:9.5px;letter-spacing:.14em}.mx-foot{padding-top:12px}.mx-res{padding:8px 13px;font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.mx-card,.mx-steam{animation:none}.mx-card,.mx-art svg{transition:none}}

/* ---------- BACK THE RECKONING ---------- */
.sp-body{--plex:"IBM Plex Sans",-apple-system,system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--disp:"Jost",Futura,sans-serif}
.sp-pays{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(14px,1.5vw,22px);max-width:1080px}
.sp-pay{padding:20px 20px 18px;border-radius:18px;background:rgba(12,13,30,.6);border:1px solid rgba(255,255,255,.09);animation:blk-rise .7s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0) * 60ms)}
.sp-ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.06);color:#e6e1d6}
.sp-ic svg{width:20px;height:20px}
.sp-pay h3{margin:14px 0 6px;font:600 19px/1.2 var(--disp);color:#fff}
.sp-pay p{margin:0;font:15px/1.5 var(--plex);color:#bdb9b0}
.sp-never{display:flex;gap:12px;align-items:flex-start;max-width:1080px;margin:18px 0 0;padding:14px 18px;border-radius:14px;background:rgba(46,200,110,.07);border:1px solid rgba(46,200,110,.3);font:15px/1.5 var(--plex);color:#d8d3c8}
.sp-never svg{flex:none;width:22px;height:22px;color:#7fe0a8;margin-top:1px}
.sp-h{margin:40px 0 16px;font:600 26px var(--disp);color:#fff}
.sp-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(14px,1.5vw,22px);max-width:1080px}
.sp-tier{position:relative;display:flex;flex-direction:column;padding:22px 22px 20px;border-radius:22px;overflow:hidden;
  background:radial-gradient(120% 80% at 0% 0%,rgba(var(--bc),.16),transparent 58%),rgba(12,13,16,.74);border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 26px 50px -30px rgba(0,0,0,.95);animation:blk-rise .7s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0) * 70ms + 120ms)}
.sp-tier::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,rgb(var(--bc)),rgba(var(--bc),.3) 50%,transparent 85%)}
.sp-tier.sp-lead{border-color:rgba(227,200,120,.4)}
.sp-when{font:500 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgb(var(--bc))}
.sp-tier h4{margin:8px 0 2px;font:600 25px var(--disp);color:#fff}
.sp-price{margin:0 0 10px;font:500 13px var(--mono);color:#8f8b84}
.sp-xp{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;margin:0 0 16px;padding:6px 12px 6px 9px;border-radius:999px;font:600 12.5px var(--mono);letter-spacing:.02em;color:#f3e2ad;background:linear-gradient(180deg,rgba(var(--bc),.16),rgba(var(--bc),.06));border:1px solid rgba(var(--bc),.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.sp-xp svg{width:14px;height:14px;fill:rgb(var(--bc));stroke:none;filter:drop-shadow(0 0 6px rgba(var(--bc),.6))}
.sp-tier ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:9px}
.sp-tier li{display:flex;gap:9px;align-items:flex-start;font:14.5px/1.45 var(--plex);color:#d8d3c8}
.sp-tier li svg{flex:none;width:16px;height:16px;margin-top:3px;color:rgb(var(--bc))}
.sp-tell{margin-top:auto;align-self:flex-start;padding:10px 16px;border-radius:999px;cursor:pointer;font:600 13.5px var(--plex);color:#fff;background:rgba(var(--bc),.14);border:1px solid rgba(var(--bc),.55);transition:background .2s}
.sp-tell:hover{background:rgba(var(--bc),.28)}
.sp-tier.sp-lead .sp-tell{color:#12131A;border:0;background:linear-gradient(180deg,#f1dc9c,#c99a41)}
.sp-on{margin:auto 0 0;font:600 13.5px var(--plex);color:#7fe0a8}
.sp-on button{margin-left:8px;border:0;background:none;cursor:pointer;font:500 12px var(--plex);color:#8f8b84;text-decoration:underline}
.sp-fine{max-width:760px;margin:30px 0 0;display:grid;gap:10px;font:14px/1.55 var(--plex);color:#8f8b84}.sp-fine b{color:#d8d3c8}
@media (prefers-reduced-motion:reduce){.sp-pay,.sp-tier{animation:none}}

/* INT4: Back the Reckoning stays out of sight until the ladder opens it (sidebar.js clears data-closed) */
#support[data-closed]{display:none!important}
@media (max-width:560px){.mx-art img.mx-photo{max-width:118px}}
@media (prefers-reduced-motion:reduce){.mx-art img.mx-photo{transition:none}}