/* SITTERS — flat like the art: cream wall, ink edges, one orange. No gradients,
   no rounded corners, hard shadows only. */
:root{
  --paper:#f4f2ec; --paper2:#e9e4d6; --ink:#16161c; --ink2:#5b5a60;
  --orange:#ee7a34; --teal:#309494; --ok:#2f8a55; --err:#c8373a;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif}
svg{display:block; max-width:100%}
a{color:inherit}
code{font:.9em ui-monospace,Menlo,monospace; background:var(--paper2); padding:1px 4px}
.wrap{width:min(1180px,92vw); margin:0 auto}
h1,h2,h3,.mark,.btn,.stat b,.num,.eyebrow,.qlabel,.cap{font-family:"Silkscreen",ui-monospace,monospace}
h2{font-size:clamp(24px,3vw,34px); line-height:1.1; margin:0 0 10px; font-weight:700}
.sub{color:var(--ink2); max-width:70ch; margin:0 0 26px}

/* bar */
.bar{position:sticky; top:0; z-index:40; background:var(--paper); border-bottom:4px solid var(--ink)}
.barin{display:flex; align-items:center; gap:28px; height:66px}
.mark{font-size:26px; font-weight:700; text-decoration:none; letter-spacing:1px}
.bar nav{display:flex; gap:22px; margin-left:auto}
.bar nav a{font-size:14px; text-decoration:none; color:var(--ink2)}
.bar nav a:hover{color:var(--ink)}

/* buttons */
.btn{font-size:15px; color:var(--paper); background:var(--ink); border:3px solid var(--ink);
  padding:12px 20px; cursor:pointer; box-shadow:4px 4px 0 var(--orange); transition:transform .06s}
.btn:hover:not(:disabled){transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--orange)}
.btn:active:not(:disabled){transform:translate(3px,3px); box-shadow:1px 1px 0 var(--orange)}
.btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none}
.btn-sm{padding:8px 14px; font-size:13px; box-shadow:3px 3px 0 var(--orange)}
.btn-lg{width:100%; padding:17px; font-size:19px; margin-top:18px}
.btn.ghost{background:var(--paper); color:var(--ink)}

/* hero */
.hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(400px,500px); gap:52px;
  align-items:start; padding:34px 0 56px; scroll-margin-top:70px}
.eyebrow{font-size:12px; letter-spacing:2px; color:var(--ink2); text-transform:uppercase; margin:0 0 18px}
h1{font-size:clamp(32px,4.4vw,58px); line-height:1.02; margin:0; font-weight:700}
.heroCopy h1::after{content:""; display:block; width:72px; height:10px; background:var(--orange); margin:26px 0 22px}
.lede{font-size:17px; color:var(--ink2); margin:0 0 28px; max-width:46ch}
.facts{display:grid; grid-template-columns:1fr 1fr; gap:0 34px; margin:0 0 28px; max-width:54ch}
.facts div{display:flex; gap:10px; align-items:baseline; padding:10px 0; border-top:2px solid var(--paper2)}
.facts dt{font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink2); flex:0 0 70px}
.facts dd{margin:0; font-size:14px; font-weight:700}
.statline{display:grid; grid-template-columns:repeat(3,1fr); border:3px solid var(--ink);
  background:var(--paper2); max-width:54ch; box-shadow:6px 6px 0 var(--ink)}
.stat{padding:13px 16px; border-right:2px solid var(--ink)}
.stat:last-child{border-right:0}
.stat b{display:block; font-size:22px; line-height:1; margin-bottom:6px; font-variant-numeric:tabular-nums}
.stat span{font-size:11px; color:var(--ink2)}
.refnote{margin:22px 0 0; font-size:14px; background:var(--orange); color:var(--ink); display:inline-block; padding:6px 10px; font-weight:700}

.mintCard{border:4px solid var(--ink); background:var(--paper); box-shadow:10px 10px 0 var(--ink); position:sticky; top:90px}
.mintArt{padding:16px 16px 0}
.frame{border:3px solid var(--ink); background:var(--paper2); aspect-ratio:1/1; overflow:hidden}
.mintArt .frame{width:min(100%, max(180px, calc(100vh - 520px))); margin:0 auto}
.frame svg{width:100%; height:100%}
.cap{text-align:center; font-size:11px; letter-spacing:1px; color:var(--ink2); margin:10px 0 0}
.mintBody{padding:18px 22px 22px}
.qlabel{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--ink2); margin:0 0 10px}
.qty{display:grid; grid-template-columns:repeat(6,1fr); gap:6px}
.qty button{font:700 15px "Silkscreen",monospace; padding:10px 0; border:3px solid var(--ink);
  background:var(--paper); cursor:pointer}
.qty button.on{background:var(--ink); color:var(--paper)}
.breakdown{margin-top:16px; border-top:2px solid var(--ink)}
.row{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed #c9c3b4; font-size:14px}
.row.total{border-bottom:0; font-size:17px}
.status{font-size:13px; color:var(--ink2); margin:14px 0 0; min-height:2.6em}
.status.ok{color:var(--ok)} .status.err{color:var(--err)}

/* bands */
.band{background:var(--ink); color:var(--paper); padding:64px 0; scroll-margin-top:66px}
.band .sub{color:#b9b6ae}
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:26px}
.card{background:var(--paper); color:var(--ink); border:3px solid var(--paper); padding:20px; box-shadow:6px 6px 0 var(--orange)}
.card h3{margin:6px 0 8px; font-size:18px}
.card p{margin:0; font-size:14px; color:var(--ink2)}
.num{font-size:13px; color:var(--orange); font-weight:700}

#gallery,#faq{padding:64px 0; scroll-margin-top:66px}
.grid{display:grid; grid-template-columns:repeat(8,1fr); gap:10px}
.grid .frame{box-shadow:4px 4px 0 var(--ink)}

/* holder area */
.mineHead{display:flex; align-items:center; gap:18px; justify-content:space-between}
.mineGrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px}
.tok{background:var(--paper); color:var(--ink); border:3px solid var(--paper); padding:10px}
.tok .frame{border-width:2px}
.tok .meta{display:flex; justify-content:space-between; align-items:baseline; margin:8px 0 6px; gap:6px}
.tok .meta b{font:700 14px "Silkscreen",monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tok .seat{font-size:11px; font-weight:700; padding:2px 6px; background:var(--paper2); white-space:nowrap}
.tok .seat.on{background:var(--teal); color:#fff}
.tok .acts{display:grid; grid-template-columns:1fr; gap:6px}
.tok input{font:14px system-ui; padding:7px; border:2px solid var(--ink); width:100%}
.tok .nameRow{display:grid; grid-template-columns:1fr auto; gap:6px}
.tok .btn{box-shadow:none; padding:7px 10px; font-size:12px}
.refPanel{margin-top:40px; border:3px solid var(--paper); padding:22px; max-width:760px}
.refPanel h3{margin:0 0 12px}
.refRow{display:grid; grid-template-columns:1fr auto; gap:10px; margin-bottom:18px}
.refRow input{font:14px ui-monospace,Menlo,monospace; padding:10px; border:3px solid var(--paper); background:var(--ink); color:var(--paper)}
.refStats{background:var(--paper); color:var(--ink); box-shadow:6px 6px 0 var(--orange); margin-bottom:22px}
.refStats .stat span{color:var(--ink2)}

.faq details{border-top:3px solid var(--ink); padding:14px 0}
.faq summary{cursor:pointer; font:700 17px "Silkscreen",monospace}
.faq p{color:var(--ink2); margin:10px 0 0; max-width:72ch}
footer{border-top:4px solid var(--ink); padding:22px 0}
.footin{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px}
.addr a{font-family:ui-monospace,Menlo,monospace}

/* ── v2: economy ─────────────────────────────────────────────────── */
.statline{grid-template-columns:repeat(3,1fr)}
.jackpot{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  max-width:54ch; margin:18px 0 0; padding:12px 16px; background:var(--orange); border:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink)}
.jackpot b{font:700 26px/1 "Silkscreen",monospace; margin:0 8px}
.jl{font:700 12px "Silkscreen",monospace; text-transform:uppercase}
.jr{font-size:14px} .jr b{font-size:16px; margin:0}
.ladder{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-width:54ch; margin:22px 0 0}
.tier{position:relative; border:3px solid var(--ink); padding:9px 10px 8px; background:var(--paper); overflow:hidden}
.tier i{position:absolute; inset:0 auto 0 0; width:var(--p); background:var(--paper2)}
.tier b,.tier span{position:relative; display:block}
.tier b{font:700 15px "Silkscreen",monospace}
.tier span{font-size:11px; color:var(--ink2)}
.saleState{font:700 13px "Silkscreen",monospace; margin:0 0 14px; padding:7px 10px; background:var(--paper2); text-align:center}
.saleState.on{background:var(--ok); color:#fff}

.split{display:flex; border:3px solid var(--paper); margin:6px 0 8px; font-size:13px}
.split div{padding:12px 10px; border-right:3px solid var(--ink); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.split div:nth-child(1){background:var(--paper2); color:var(--ink)}
.split div:nth-child(2){background:var(--teal); color:#fff}
.split div:nth-child(3){background:var(--orange); color:var(--ink)}
.split div:nth-child(4){background:#f4cd4f; color:var(--ink); border-right:0}
.split b{font:700 16px "Silkscreen",monospace; margin-right:4px}

.frameRow{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.frameRow figure{margin:0}
.frame.bare{border:0; background:transparent; box-shadow:6px 6px 0 var(--ink)}
.frameRow figcaption{margin-top:12px; display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.frameRow figcaption b{font:700 16px "Silkscreen",monospace}
.frameRow figcaption span{font-size:12px; color:var(--ink2)}

.earn{display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin:0 0 26px}
.earnStats{grid-template-columns:repeat(4,1fr); max-width:none; flex:1; background:var(--paper); color:var(--ink); box-shadow:6px 6px 0 var(--orange)}
.earnStats .stat span{color:var(--ink2)}
.frameBar{position:sticky; top:74px; z-index:20; display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  background:#f4cd4f; color:var(--ink); border:3px solid var(--paper); padding:12px 14px; margin:0 0 18px; font-weight:700}
.frameBar span{flex:1; min-width:220px}
.tok.dim{opacity:.35}
.tok.keeper{border-color:#f4cd4f}
.tok.picked{border-color:var(--err)}
.tok.f1 .frame{border-color:#c98a4b} .tok.f2 .frame{border-color:#dfe4ea} .tok.f3 .frame{border-color:#f4cd4f}
.tok .frame{background:transparent}
.badge{font:700 11px "Silkscreen",monospace; padding:2px 6px; background:var(--paper2)}
.badge.fb1{background:#c98a4b} .badge.fb2{background:#dfe4ea} .badge.fb3{background:#f4cd4f}
.tok .meta2{display:flex; justify-content:space-between; font-size:11px; margin:0 0 8px; color:var(--ink2)}
.tok .acts{grid-template-columns:1fr 1fr}
.tok .nameRow{grid-column:1 / -1}
.tok .hint{grid-column:1 / -1; font:700 12px "Silkscreen",monospace; text-align:center; padding:6px; background:#f4cd4f}
.tok .acts .btn:only-child{grid-column:1 / -1}
.refPanel h3 small{font:13px system-ui; color:#b9b6ae; margin-left:10px}

@media (max-width:960px){
  .frameRow{grid-template-columns:1fr 1fr}
  .earnStats{grid-template-columns:1fr 1fr}
  .split{flex-wrap:wrap}
  .hero{grid-template-columns:1fr; gap:34px}
  .mintCard{position:static}
  .cards{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:repeat(4,1fr)}
  .bar nav{display:none}
  .connect{margin-left:auto}
  #connect{margin-left:auto}
}
@media (max-width:560px){
  .cards{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .qty{grid-template-columns:repeat(3,1fr)}
}

/* ── v3: flat price, one progress bar ────────────────────────────── */
.progress{max-width:54ch; height:20px; border:3px solid var(--ink); margin:22px 0 0; background:var(--paper)}
.progress i{display:block; height:100%; width:var(--p); background:var(--ink)}

/* narrow screens: keep the three stats even and their labels on one or two lines */
.statline{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:700px){
  .stat{padding:11px 10px}
  .stat b{font-size:18px}
  .stat span{font-size:10.5px; line-height:1.3; display:block}
}