/* ICONS — paper, ink, one red accent. Hard edges everywhere: the art has no
   anti-aliasing, so neither does the page. */
:root{
  --paper:#eee7d8; --paper2:#e5ddca; --ink:#1a1618; --ink2:#5c554e;
  --red:#c63e3e; --line:#1a1618; --ok:#2f7d4f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.55 "Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%}
a{color:inherit}
code{font:0.92em/1 ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--paper2); padding:1px 4px}
.wrap{width:min(1180px,92vw); margin:0 auto}

/* ── bar ─────────────────────────────────────────────────────────── */
.bar{position:sticky; top:0; z-index:40; background:var(--paper); border-bottom:3px solid var(--line)}
.barin{display:flex; align-items:center; gap:28px; height:66px}
.mark{font:900 26px/1 Arial Black,Arial,sans-serif; letter-spacing:-0.5px; text-decoration:none}
.bar nav{display:flex; gap:20px; 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:700 15px/1 Arial,sans-serif; color:var(--paper); background:var(--ink);
  border:3px solid var(--ink); padding:12px 20px; cursor:pointer;
}
.btn:hover:not(:disabled){background:var(--red); border-color:var(--red)}
.btn:disabled{opacity:.42; cursor:not-allowed}
.btn-sm{padding:9px 16px; font-size:13px}
.btn-lg{width:100%; padding:18px; font-size:19px; margin-top:18px}

/* ── hero: the mint is the page, so it sits above the fold ───────── */
.hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(440px,560px); gap:48px;
  align-items:start; padding:22px 0 44px; scroll-margin-top:70px;
}
.eyebrow{
  font:700 11.5px/1 Arial,sans-serif; letter-spacing:2.6px; color:var(--ink2);
  text-transform:uppercase; margin:0 0 20px;
}
h1{
  font:900 clamp(30px,3.6vw,50px)/1.04 Arial Black,Arial,sans-serif;
  letter-spacing:-1.2px; margin:0;
}
.heroCopy h1::after{content:""; display:block; width:64px; height:7px; background:var(--red); margin:24px 0 22px}
.lede{font-size:16.5px; line-height:1.6; color:var(--ink2); margin:0 0 30px; max-width:44ch}

.facts{display:grid; grid-template-columns:1fr 1fr; gap:0 36px; margin:0 0 28px; max-width:52ch}
.facts div{display:flex; gap:10px; align-items:baseline; padding:10px 0;
           border-top:1px solid rgba(26,22,24,.16)}
.facts dt{font:700 10.5px/1.3 Arial,sans-serif; letter-spacing:1.5px; text-transform:uppercase;
          color:var(--ink2); flex:0 0 52px}
.facts dd{margin:0; font-size:13.5px; font-weight:700; line-height:1.35}

.statline{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:3px solid var(--line);
          background:var(--paper2); max-width:52ch}
.statline .stat{padding:13px 16px; border-right:1px solid rgba(26,22,24,.22)}
.statline .stat:last-child{border-right:0}
.statline b{display:block; font:900 20px/1 Arial Black,Arial,sans-serif;
            font-variant-numeric:tabular-nums; margin-bottom:5px}
.statline span{font-size:10.5px; letter-spacing:.5px; color:var(--ink2)}

/* the card you actually buy from */
.mintCard{border:4px solid var(--line); background:var(--paper); position:sticky; top:88px}
.mintArt{padding:16px 16px 0}
.frame{
  border:3px solid var(--line); background:var(--paper2); aspect-ratio:1/1;
  overflow:hidden; width:min(100%, max(178px, calc(100vh - 530px))); margin:0 auto;
}
.frame svg{width:100%; height:100%; image-rendering:pixelated; display:block}
.cap{text-align:center; font:700 10.5px/1 Arial,sans-serif; letter-spacing:1.5px;
     color:var(--ink2); text-transform:uppercase; margin:11px 0 0}
.mintBody{padding:20px 22px 22px}
.qlabel{font:700 11px/1 Arial,sans-serif; letter-spacing:2px; text-transform:uppercase;
        color:var(--ink2); margin:0 0 11px}
.qty{display:grid; grid-template-columns:repeat(6,1fr); gap:7px}
.qty button{
  font:900 16px/1 Arial,sans-serif; padding:15px 0; cursor:pointer;
  background:var(--paper); color:var(--ink); border:3px solid var(--line);
}
.qty button:hover{background:var(--paper2)}
.qty button.on{background:var(--ink); color:var(--paper)}
.breakdown{margin-top:16px; border-top:1px solid rgba(26,22,24,.2)}
.row{display:flex; justify-content:space-between; align-items:baseline; padding:11px 0;
     font-size:14.5px; border-bottom:1px solid rgba(26,22,24,.12)}
.row span{color:var(--ink2)}
.row b{font-variant-numeric:tabular-nums}
.row.total{border-bottom:0; padding-top:14px}
.row.total span{color:var(--ink); font-weight:700; font-size:15px}
.row.total b{font:900 23px/1 Arial Black,Arial,sans-serif}
.btn-lg{width:100%; padding:18px; font-size:18px; margin-top:16px}
.status{font-size:12px; line-height:1.45; color:var(--ink2); margin:10px 0 0; min-height:28px}
.status.err{color:var(--red)}
.status.ok{color:var(--ok)}

/* ── the free-tier note ──────────────────────────────────────────── */
.freeNote{padding:10px 0 64px}
.freeNote h2{font:900 26px/1 Arial Black,Arial,sans-serif; margin:0 0 20px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:40px}
.two p{margin:0; color:var(--ink2); font-size:15px; line-height:1.65}

/* ── bands, cards, gallery ───────────────────────────────────────── */
.band{background:var(--ink); color:var(--paper); padding:66px 0; margin:10px 0}
.band h2{font:900 30px/1 Arial Black,Arial,sans-serif; margin:0 0 30px}
.band code{background:rgba(238,231,216,.14); color:var(--paper)}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.card{border:3px solid var(--paper); padding:24px}
.card h3{font:900 17px/1.2 Arial,sans-serif; margin:0 0 12px; color:var(--red)}
.card p{margin:0; font-size:14.5px; color:#cfc7b6}
#gallery{padding:66px 0; scroll-margin-top:80px}
#gallery h2{font:900 30px/1 Arial Black,Arial,sans-serif; margin:0 0 10px}
.sub{color:var(--ink2); max-width:66ch; margin:0 0 28px}
.grid{display:grid; grid-template-columns:repeat(8,1fr); gap:10px}
.grid .frame{border-width:3px}

/* ── faq, footer ─────────────────────────────────────────────────── */
.faq{display:grid; gap:2px}
details{border:2px solid var(--paper); padding:16px 18px}
summary{cursor:pointer; font-weight:700; list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+ "; color:var(--red); font-weight:900}
details[open] summary::before{content:"– "}
details p{margin:12px 0 0; color:#cfc7b6; font-size:14.5px}
footer{border-top:3px solid var(--line); padding:26px 0; font-size:13px; color:var(--ink2)}
.footin{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.addr a{font-family:ui-monospace,Menlo,monospace}

@media (max-width:980px){
  /* the card leads on a phone: you scroll to read, you do not scroll to buy */
  .hero{grid-template-columns:1fr; gap:36px; padding:36px 0 30px}
  .mintCard{position:static; order:-1}
  .frame{width:100%}
  .lede,.facts,.statline{max-width:none}
  .two,.cards{grid-template-columns:1fr; gap:22px}
  .grid{grid-template-columns:repeat(4,1fr)}
  .bar nav{display:none}
}
@media (max-width:560px){
  /* six chips across a phone leaves 39px each — "100" stops being readable */
  .qty{grid-template-columns:repeat(3,1fr)}
  .facts{grid-template-columns:1fr}
  .statline{grid-template-columns:repeat(2,1fr)}
  .statline .stat:nth-child(2){border-right:0}
  .statline .stat:nth-child(-n+2){border-bottom:1px solid rgba(26,22,24,.22)}
  .grid{grid-template-columns:repeat(3,1fr)}
  h1{letter-spacing:-.6px}
}