:root{
  --purple:#9A45B6; --purple-deep:#6B2A82; --purple-dark:#41184F;
  --cream:#FFF7E6;  --sand:#E8DCC8;      --denim:#4E6F95;
  --ink:#0B0B0B;    --green:#3ED07A;     --skin:#FCCAAB;
  --edge:5px solid var(--ink);
  --pop:10px 10px 0 var(--ink);
  --pop-sm:6px 6px 0 var(--ink);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--purple-dark); color:var(--ink);
  font-family:Archivo,'Helvetica Neue',Arial,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
.wrap{width:min(1120px,92vw); margin-inline:auto}
.band{padding:84px 0; border-bottom:var(--edge)}
.band--hero{background:var(--purple); padding-top:34px}
.band--ca{background:var(--ink); padding:30px 0; border-bottom:none}
.band--lore{background:var(--cream)}
.band--buy{background:var(--purple-deep)}
.band--nomics{background:var(--sand)}
.band--gallery{background:var(--purple)}
.disp{font-family:'Luckiest Guy',Impact,'Arial Black',sans-serif; font-weight:400;
      letter-spacing:.02em; line-height:.94; text-wrap:balance; margin:0}
.eyebrow{font-family:Archivo,sans-serif; font-weight:800; font-size:13px;
         letter-spacing:.18em; text-transform:uppercase; margin:0 0 14px}

.nav{display:flex; align-items:center; justify-content:space-between; gap:16px;
     padding-bottom:30px; flex-wrap:wrap}
.nav__mark{font-family:'Luckiest Guy',Impact,sans-serif; font-size:30px; color:var(--cream);
           -webkit-text-stroke:2px var(--ink); text-shadow:3px 3px 0 var(--ink)}
.socials{display:flex; gap:10px; flex-wrap:wrap; padding:0; margin:0; list-style:none}
.social{display:grid; place-items:center; width:46px; height:46px; background:var(--cream);
        border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); color:var(--ink);
        transition:transform .12s ease, box-shadow .12s ease}
.social:hover,.social:focus-visible{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink)}
.social svg{width:22px; height:22px; fill:currentColor}

.hero{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center}
.hero__title{font-size:clamp(76px,13vw,168px); color:var(--cream);
             -webkit-text-stroke:4px var(--ink); text-shadow:12px 12px 0 var(--ink)}
.hero__tag{font-family:'Luckiest Guy',Impact,sans-serif; font-size:clamp(21px,2.7vw,32px);
           color:var(--cream); -webkit-text-stroke:1.5px var(--ink);
           text-shadow:4px 4px 0 var(--ink); margin:22px 0 0; line-height:1.15}
.hero__body{max-width:52ch; color:var(--cream); font-size:18px; margin:22px 0 0}
.hero__art{border:var(--edge); box-shadow:var(--pop); background:var(--purple); rotate:2deg}
.cta{display:flex; gap:14px; flex-wrap:wrap}
.btn{display:inline-block; font-family:'Luckiest Guy',Impact,sans-serif; font-size:21px;
     padding:15px 30px; border:var(--edge); box-shadow:var(--pop-sm); text-decoration:none;
     background:var(--cream); color:var(--ink);
     transition:transform .12s ease, box-shadow .12s ease}
.btn--go{background:var(--green)}
.btn:hover,.btn:focus-visible{transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink)}

.ca{display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center}
.ca__label{font-family:'Luckiest Guy',Impact,sans-serif; color:var(--green); font-size:19px;
           letter-spacing:.05em}
.ca__value{font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:15px; color:var(--cream);
           background:#1C1C1C; border:2px solid #3A3A3A; padding:11px 16px;
           overflow-x:auto; max-width:min(560px,80vw); white-space:nowrap}
.ca__copy{font-family:Archivo,sans-serif; font-weight:800; font-size:14px; letter-spacing:.1em;
          text-transform:uppercase; cursor:pointer; padding:12px 20px; color:var(--ink);
          background:var(--green); border:2px solid var(--ink); box-shadow:3px 3px 0 #000}
.ca__copy:hover{transform:translate(1px,1px); box-shadow:2px 2px 0 #000}

.lore{display:grid; grid-template-columns:.9fr 1.1fr; gap:52px; align-items:center}
.lore__art{border:var(--edge); box-shadow:var(--pop); rotate:-2deg}
.lore h2{font-size:clamp(42px,6vw,72px)}
.lore p{max-width:56ch}
.lore p+p{margin-top:18px}

.band--buy h2{font-size:clamp(42px,6vw,72px); color:var(--cream);
              -webkit-text-stroke:3px var(--ink); text-shadow:7px 7px 0 var(--ink);
              margin-bottom:44px}
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:26px;
       padding:0; margin:0; list-style:none; counter-reset:step}
.step{background:var(--cream); border:var(--edge); box-shadow:var(--pop-sm); padding:26px 24px 28px}
.step__n{font-family:'Luckiest Guy',Impact,sans-serif; font-size:44px; line-height:1;
         color:var(--purple); -webkit-text-stroke:2px var(--ink); display:block; margin-bottom:8px}
.step h3{font-family:'Luckiest Guy',Impact,sans-serif; font-weight:400; font-size:23px;
         margin:0 0 8px; line-height:1.1}
.step p{margin:0; font-size:15.5px}

.band--nomics h2{font-size:clamp(42px,6vw,72px); margin-bottom:12px}
.nomics{display:grid; grid-template-columns:repeat(auto-fit,minmax(198px,1fr)); gap:22px;
        margin:38px 0 30px}
.tile{background:var(--cream); border:var(--edge); box-shadow:var(--pop-sm); padding:24px 22px}
.tile__k{font-family:Archivo,sans-serif; font-weight:800; font-size:12px; letter-spacing:.16em;
         text-transform:uppercase; color:#6A5A48; margin:0 0 8px}
.tile__v{font-family:'Luckiest Guy',Impact,sans-serif; font-size:31px; line-height:1.05; margin:0;
         font-variant-numeric:tabular-nums}
.note{max-width:62ch; font-size:16.5px}

.band--gallery h2{font-size:clamp(42px,6vw,72px); color:var(--cream);
                  -webkit-text-stroke:3px var(--ink); text-shadow:7px 7px 0 var(--ink);
                  margin-bottom:40px}
.gal{display:grid; grid-template-columns:repeat(auto-fit,minmax(226px,1fr)); gap:26px}
.gal figure{margin:0; border:var(--edge); box-shadow:var(--pop-sm); background:var(--purple-deep)}
.gal figure:nth-child(odd){rotate:-1.5deg}
.gal figure:nth-child(even){rotate:1.5deg}
.gal figcaption{font-family:'Luckiest Guy',Impact,sans-serif; font-size:16px; padding:11px 14px;
                background:var(--cream); border-top:var(--edge)}

.foot{background:var(--ink); color:var(--cream); padding:60px 0 46px; text-align:center}
.foot__mark{font-family:'Luckiest Guy',Impact,sans-serif; font-size:52px; color:var(--cream);
            -webkit-text-stroke:2px #000; margin:0 0 22px}
.foot .socials{justify-content:center; margin-bottom:30px}
.foot__legal{max-width:66ch; margin:0 auto; font-size:13.5px; line-height:1.7; color:#B9A9C6}
.foot__legal strong{color:var(--cream)}

@media (max-width:860px){
  .hero,.lore{grid-template-columns:1fr; gap:32px}
  .hero__art{order:-1; rotate:0deg}
  .lore__art{rotate:0deg}
  .band{padding:60px 0}
  .hero__title{text-shadow:8px 8px 0 var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}