/* Layout: full-bleed colour bands, one loud idea per band, sticker-flat objects with ink outlines and hard shadows. */
:root{
  --base:#FFDD00; --punch:#FF4D9D; --ultra:#2F3CFF; --zap:#C6F432; --ink:#14110F; --paper:#FFFFFF;
  --display:'Bagel Fat One','Arial Rounded MT Bold','Trebuchet MS',sans-serif;
  --text:'Outfit','Segoe UI',system-ui,sans-serif;
  --mono:'Space Mono','SFMono-Regular',Consolas,monospace;
  --gut:max(20px, env(safe-area-inset-left, 0px)); --gutr:max(20px, env(safe-area-inset-right, 0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--base);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.45;overflow-x:hidden}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:.92;text-wrap:balance}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:4px solid var(--ultra);outline-offset:3px}
.wrap{padding-left:var(--gut);padding-right:var(--gutr);max-width:1320px;margin:0 auto;width:100%}
.mono{font-family:var(--mono);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:13px}
.bn{text-transform:lowercase}
.ph{font-family:var(--mono);font-size:.8em;border:2px dashed currentColor;border-radius:8px;padding:0 6px;white-space:nowrap;opacity:.85}

/* header */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--base);border-bottom:4px solid var(--ink)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.logo{font-family:var(--display);font-size:34px;line-height:1;text-decoration:none;text-shadow:3px 3px 0 var(--punch)}
nav.main{display:flex;gap:26px;font-weight:600}
nav.main a{text-decoration:none;padding:8px 0;border-bottom:3px solid transparent}
nav.main a:hover,nav.main a[aria-current="page"]{border-bottom-color:var(--ink)}
.cartbtn{background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:12px 22px;font-weight:800}
.cartbtn b{background:var(--zap);color:var(--ink);border-radius:999px;padding:0 8px;margin-left:6px}
@media (max-width:760px){nav.main{display:none}}

/* buttons */
.btn{display:inline-block;text-decoration:none;background:var(--ultra);color:var(--paper);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);border-radius:999px;padding:14px 30px;font-weight:800;font-size:19px;transition:transform .15s, box-shadow .15s}
.btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.btn.alt{background:var(--paper);color:var(--ink)}
.btn.zap{background:var(--zap);color:var(--ink)}
.btn.sm{padding:9px 20px;font-size:16px;box-shadow:4px 4px 0 var(--ink)}
.chip{display:inline-block;background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:6px 16px}
.sticker{display:inline-block;font-family:var(--display);background:var(--zap);border:5px solid var(--ink);box-shadow:6px 6px 0 var(--ink);border-radius:999px;padding:8px 24px;font-size:30px;line-height:1}

/* hero */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;align-items:center;padding-block:48px 56px}
.hero h1{font-size:clamp(56px,9.4vw,138px);letter-spacing:-.02em;text-shadow:.06em .06em 0 var(--punch)}
.hero h1 span{display:inline-block}
.hero .copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.hero p.lede{font-size:21px;font-weight:600;max-width:30em}
.cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:420px}
.stage .disc{position:absolute;width:min(92%,460px);aspect-ratio:1;border-radius:50%;background:var(--punch);border:5px solid var(--ink)}
.stage .art{position:relative;width:min(48%,240px);transform:rotate(12deg)}
.stage .star{position:absolute;top:4%;right:8%;width:90px}
.stage .sticker{position:absolute;bottom:8%;left:2%;transform:rotate(-8deg)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.stage{min-height:340px}}
svg.art{display:block;width:100%;height:auto;overflow:visible}

/* bands */
.band{padding-block:84px}
.band.ink{background:var(--ink);color:var(--paper)}
.band.ultra{background:var(--ultra);color:var(--paper)}
.band.punch{background:var(--punch)}
.band.zap{background:var(--zap)}
.band.paper{background:var(--paper)}
.band h2{font-size:clamp(40px,6.4vw,92px)}
.eyebrow{margin-bottom:18px;display:block}

/* manifesto */
.manifesto p{font-family:var(--display);font-size:clamp(34px,5.6vw,84px);line-height:1.02;max-width:17em}
.manifesto .w{opacity:.22;transition:none}
.manifesto .w.hot{color:var(--zap)}

/* lineup */
.lineup{background:var(--ink);color:var(--paper);overflow:hidden}
.lineup .head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-block:72px 28px}
.track{display:flex;gap:24px;padding:0 var(--gutr) 72px var(--gut);overflow-x:auto;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.card{flex:0 0 min(78vw,360px);color:var(--ink);border-radius:32px;border:5px solid var(--ink);padding:22px;display:flex;flex-direction:column;gap:14px;text-decoration:none;min-height:480px;justify-content:space-between;outline:4px solid var(--paper);outline-offset:-9px}
.card .pic{height:230px;display:flex;align-items:center;justify-content:center}
.card .pic .art{max-height:230px;width:auto;height:230px;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.card:hover .pic .art{transform:rotate(-8deg) scale(1.08)}
.card h3{font-size:44px}
.card .row{display:flex;justify-content:space-between;align-items:center;gap:8px}

/* promises */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.tile{background:var(--paper);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);border-radius:28px;padding:26px;display:flex;flex-direction:column;gap:10px}
.tile h3{font-size:34px}

/* signup */
.signup form{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.field{font:inherit;font-size:18px;border:4px solid var(--ink);border-radius:999px;padding:13px 22px;background:var(--paper);color:var(--ink);min-width:0;flex:1 1 240px;max-width:420px}
.note{margin-top:14px;font-size:15px;min-height:1.4em}

/* product page */
.phero{position:relative;overflow:hidden}
.phero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;padding-block:48px 64px;min-height:min(86vh,760px)}
.phero h1{padding-bottom:.14em;font-size:clamp(72px,13vw,200px);text-shadow:.05em .05em 0 var(--paper)}
.phero .copy{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.phero .tag{font-size:clamp(22px,2.6vw,32px);font-weight:800;line-height:1.1;max-width:16em}
.phero .pstage{display:flex;justify-content:center;align-items:center}
.phero .pstage .art{width:min(64%,300px)}
@media (max-width:860px){.phero .wrap{grid-template-columns:1fr;min-height:0}.phero .pstage .art{width:min(50%,220px)}}
.dots{display:flex;gap:10px;align-items:center}
.dot{width:36px;height:36px;border-radius:50%;border:4px solid var(--ink);padding:0}
.dot[aria-pressed="true"]{box-shadow:0 0 0 4px var(--paper),0 0 0 8px var(--ink)}
.buybar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 64px);z-index:30;background:var(--paper);border-bottom:4px solid var(--ink)}
.buybar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-block:10px}
.buybar strong{font-family:var(--display);font-weight:400;font-size:26px}
.chapter .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.chapter:nth-of-type(even) .viz{order:-1}
.chapter p.big{font-size:21px;font-weight:600;margin-top:20px;max-width:26em}
@media (max-width:860px){.chapter .wrap{grid-template-columns:1fr}.chapter:nth-of-type(even) .viz{order:0}}
.viz{display:flex;align-items:center;justify-content:center;min-height:300px;position:relative}
.viz svg{width:min(100%,420px);height:auto;overflow:visible}
.meter{width:100%;max-width:440px;display:flex;flex-direction:column;gap:14px}
.meter .bar{height:44px;border:4px solid currentColor;border-radius:999px;overflow:hidden;background:transparent}
.meter .bar i{display:block;height:100%;background:var(--zap);border-right:4px solid var(--ink);transform-origin:left;border-radius:999px}
.meter .lab{display:flex;justify-content:space-between}
.bignum{font-family:var(--display);font-size:clamp(90px,16vw,220px);line-height:.85}
.pulse{transform-box:fill-box;transform-origin:center;animation:pulse 1.8s ease-out infinite}
.pulse.d2{animation-delay:.6s}.pulse.d3{animation-delay:1.2s}
@keyframes pulse{0%{transform:scale(.55);opacity:1}100%{transform:scale(1.25);opacity:0}}
.wiggle{animation:wig 2.4s ease-in-out infinite;transform-origin:50% 0}
@keyframes wig{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;border:4px solid var(--ink);border-radius:28px;overflow:hidden;background:var(--paper);margin-top:32px}
.specs div{padding:20px 22px;border-right:4px solid var(--ink);border-bottom:4px solid var(--ink);margin:0 -4px -4px 0;display:flex;flex-direction:column;gap:6px}
.specs b{font-family:var(--display);font-weight:400;font-size:28px;line-height:1.05}
.nextp{display:block;text-decoration:none}
.nextp h2{font-size:clamp(56px,11vw,170px)}
.nextp:hover h2{text-shadow:.05em .05em 0 var(--punch)}

/* cart drawer */
.scrim{position:fixed;inset:0;background:rgba(20,17,15,.55);z-index:60}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--paper);border-left:5px solid var(--ink);z-index:61;display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) 20px;gap:16px;transform:translateX(105%);transition:transform .35s cubic-bezier(.2,.9,.3,1)}
.drawer.open{transform:none}
.drawer h2{font-size:44px}
.drawer .items{flex:1;overflow:auto;display:flex;flex-direction:column;gap:14px}
.line{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:center;border:3px solid var(--ink);border-radius:20px;padding:10px}
.line .thumb{height:72px;border-radius:12px;display:flex;align-items:center;justify-content:center;border:3px solid var(--ink)}
.line .thumb .art{height:56px;width:auto}
.qty{display:flex;align-items:center;gap:8px}
.qty button{width:32px;height:32px;border-radius:50%;border:3px solid var(--ink);background:var(--base);font-weight:800;line-height:1;padding:0}
.sum{display:flex;justify-content:space-between;font-weight:800;font-size:19px;border-top:4px solid var(--ink);padding-top:14px}
.x{background:none;border:3px solid var(--ink);border-radius:50%;width:40px;height:40px;font-weight:800}

/* checkout */
.co .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:32px;padding-block:48px 80px;align-items:start}
@media (max-width:900px){.co .wrap{grid-template-columns:1fr}}
.co h1{font-size:clamp(48px,7vw,96px);margin-bottom:8px}
.panel{background:var(--paper);border:4px solid var(--ink);border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:8px 8px 0 var(--ink)}
.panel h2{font-size:32px}
.frm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.frm label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:15px}
.frm label.full{grid-column:1/-1}
.frm input,.frm select{font:inherit;border:3px solid var(--ink);border-radius:14px;padding:11px 14px;background:var(--paper);color:var(--ink);min-width:0;width:100%}
@media (max-width:520px){.frm{grid-template-columns:1fr}}
.pay{border:3px dashed var(--ink);border-radius:16px;padding:16px;font-size:15px}
.done{background:var(--zap)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,240px);opacity:0;pointer-events:none;background:var(--ink);color:var(--paper);border-radius:999px;padding:12px 24px;font-weight:600;z-index:80;transition:transform .3s;max-width:calc(100% - 32px);text-align:center}
.toast.on{transform:translate(-50%,0);opacity:1}
.curtain{position:fixed;inset:0;background:var(--punch);z-index:90;transform:scaleY(0);transform-origin:bottom;pointer-events:none}
footer.site{background:var(--ink);color:var(--paper);padding-block:56px}
footer.site .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:flex-end}
footer.site .logo{font-size:clamp(64px,12vw,160px);text-shadow:.05em .05em 0 var(--punch);color:var(--base)}
@media (prefers-reduced-motion:reduce){.marq div,.pulse,.wiggle{animation:none}.drawer,.toast,.btn{transition:none}}

/* photo and video slots */
img.shot{display:block;width:100%;height:auto;border:5px solid var(--ink);border-radius:36px;box-shadow:12px 12px 0 var(--ink);background:var(--paper)}
.pstage img.shot{width:min(88%,460px)}
.stage img.shot{position:relative;width:min(70%,360px);transform:rotate(6deg)}
.card .pic img.shot{height:230px;width:auto;border-width:4px;border-radius:24px;box-shadow:6px 6px 0 var(--ink)}
video.clip{display:block;width:min(100%,520px);border:5px solid var(--ink);border-radius:32px;box-shadow:12px 12px 0 var(--ink);background:var(--ink)}
footer.site nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-weight:600}
footer.site nav a{text-decoration:none;border-bottom:2px solid currentColor}

/* native feel */
html{-webkit-tap-highlight-color:transparent}
body{overscroll-behavior-y:none}
a,button{touch-action:manipulation}
.btn:active,.card:active,.dot:active,.cartbtn:active,.tabs a:active,.tabs button:active{transform:scale(.95)}
.hbtns{display:flex;gap:10px;align-items:center}
.snd{width:46px;height:46px;border-radius:50%;border:3px solid var(--ink);background:var(--zap);font-size:20px;font-weight:800;line-height:1;padding:0}
.snd[aria-pressed="false"]{background:var(--paper);text-decoration:line-through;opacity:.7}
/* 3D stage */
.three{position:relative;width:min(74%,360px);aspect-ratio:3/4;cursor:grab;touch-action:pan-y}
.three:active{cursor:grabbing}
.three canvas{display:block;width:100%!important;height:100%!important}
.three .hint{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);white-space:nowrap;background:var(--paper);border:3px solid var(--ink);border-radius:999px;padding:3px 12px;pointer-events:none}
.pstage .three{width:min(80%,400px)}
/* bottom tab bar + sheet on phones */
.tabs{display:none}
@media (max-width:760px){
  .tabs{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--paper);border-top:4px solid var(--ink);padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  .tabs a,.tabs button{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;font-weight:800;font-size:12px;background:none;border:0;padding:6px 0;border-radius:14px;transition:transform .12s}
  .tabs i{font-style:normal;font-size:18px;line-height:1}
  .tabs [aria-current="page"]{background:var(--base)}
  .tabs b{background:var(--ink);color:var(--paper);border-radius:999px;padding:0 6px;font-size:11px}
  footer.site{padding-bottom:120px}
  .toast{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  header.site .cartbtn{display:none}
  .buybar{top:calc(env(safe-area-inset-top,0px) + 62px)}
  .drawer{top:auto;left:0;right:0;width:100%;height:min(82%,640px);border-left:0;border-top:5px solid var(--ink);border-radius:28px 28px 0 0;transform:translateY(105%);padding-top:18px}
  .drawer::before{content:"";width:56px;height:6px;border-radius:3px;background:var(--ink);align-self:center;flex:none}
  .band{padding-block:60px}
}

.stage video.heroclip{position:relative;width:min(62%,340px);aspect-ratio:1;object-fit:cover;transform:rotate(5deg);border-radius:36px}
.viz img.shot{width:min(100%,440px)}
@media (max-width:860px){.stage video.heroclip{width:min(64%,300px)}}