/* Poster Studio: the poster typefaces (OFL or Apache licensed, self-hosted) and the studio layout. */
@font-face{font-family:"Bebas Neue";src:url(/assets/fonts/poster/bebas-neue-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Alfa Slab One";src:url(/assets/fonts/poster/alfa-slab-one-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Shrikhand";src:url(/assets/fonts/poster/shrikhand-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Yatra One";src:url(/assets/fonts/poster/yatra-one-latin-400-normal.woff2) format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Yatra One";src:url(/assets/fonts/poster/yatra-one-devanagari-400-normal.woff2) format("woff2");font-display:swap;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:"Archivo Black";src:url(/assets/fonts/poster/archivo-black-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Oswald";font-weight:400;src:url(/assets/fonts/poster/oswald-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Oswald";font-weight:700;src:url(/assets/fonts/poster/oswald-latin-700-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Abril Fatface";src:url(/assets/fonts/poster/abril-fatface-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Special Elite";src:url(/assets/fonts/poster/special-elite-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Monoton";src:url(/assets/fonts/poster/monoton-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Limelight";src:url(/assets/fonts/poster/limelight-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Righteous";src:url(/assets/fonts/poster/righteous-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Permanent Marker";src:url(/assets/fonts/poster/permanent-marker-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Ultra";src:url(/assets/fonts/poster/ultra-latin-400-normal.woff2) format("woff2");font-display:swap}

.ps{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);border-bottom:var(--rule)}
.ps-stage{padding:var(--pad);border-right:var(--rule);display:flex;flex-direction:column;align-items:center;gap:12px;position:sticky;top:70px;align-self:start}
.ps-stage canvas{width:100%;max-width:560px;height:auto;aspect-ratio:1000/1414;box-shadow:0 18px 50px rgba(0,0,0,.45);background:#222}
.ps-stage .ps-cap{font-size:13px;color:var(--soft);text-align:center;margin:0;max-width:560px}
.ps-ctl{min-width:0}
.ps-step{padding:var(--pad);border-bottom:var(--rule)}
.ps-step:last-child{border-bottom:0}
.ps-h{font-weight:900;font-stretch:130%;font-size:clamp(20px,2vw,28px);margin:0 0 12px;display:flex;gap:10px;align-items:baseline}
.ps-h b{font-size:.7em;border:var(--rule);border-radius:999px;min-width:1.7em;height:1.7em;display:inline-grid;place-items:center}
.ps-photo{display:flex;gap:14px;align-items:center}
.ps-photo img{width:120px;height:90px;object-fit:cover;border:var(--rule)}
.ps-photo p{margin:0 0 8px}
.ps-styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.ps-styles button{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:1.2}
.ps-styles canvas{width:100%;aspect-ratio:1000/1414;height:auto;outline:2px solid transparent;outline-offset:2px;background:#0003}
.ps-styles button[aria-pressed="true"] canvas{outline-color:var(--ink)}
.ps-styles button:focus-visible canvas{outline-color:var(--ink);outline-style:dashed}
.ps-styles b{font-size:13px}
.ps-styles span{color:var(--soft)}
.ps-note{font-size:14px;color:var(--soft);margin:12px 0 0}
.ps-ways{display:flex;gap:10px;margin-top:12px;align-items:center;flex-wrap:wrap}
.ps-ways button{all:unset;cursor:pointer;display:flex;border:var(--rule);border-radius:999px;overflow:hidden;height:28px}
.ps-ways button span{width:16px;height:100%}
.ps-ways button[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:3px}
.ps-words{display:grid;gap:10px}
.ps-words label{display:grid;gap:4px;font-size:13px}
.ps-words input{font:inherit;font-size:16px;padding:8px 10px;border:var(--rule);background:transparent;color:var(--ink)}
.ps-prod{display:grid;gap:8px;margin:0 0 14px;padding:0;border:0}
.ps-prod label{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:var(--rule);cursor:pointer}
.ps-prod label:has(input:checked){background:var(--ink);color:var(--bg)}
.ps-prod input{position:absolute;opacity:0}
.ps-prod small{opacity:.8}
.ps-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ps-row input[type=number]{width:70px;font:inherit;padding:8px;border:var(--rule);background:transparent;color:var(--ink)}
.ps-team{border:2px dashed var(--ink);padding:14px;margin-top:14px}
.ps-pick{width:min(1100px,96vw);max-height:90vh;border:var(--rule);background:var(--bg);color:var(--ink);padding:0}
.ps-pick::backdrop{background:rgba(0,0,0,.6)}
.ps-pick-bar{display:flex;gap:10px;padding:14px;border-bottom:var(--rule);position:sticky;top:0;background:var(--bg);z-index:1}
.ps-pick-bar input{flex:1;font:inherit;padding:8px 10px;border:var(--rule);background:transparent;color:var(--ink)}
.ps-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;padding:14px}
.ps-pick-grid button{all:unset;cursor:pointer;aspect-ratio:4/3;overflow:hidden;background:#0003}
.ps-pick-grid img{width:100%;height:100%;object-fit:cover;display:block}
.ps-pick-grid button:focus-visible{outline:3px solid var(--ink)}
.ps-more{display:block;margin:0 14px 14px}
.ps-ideas{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pad);padding:var(--pad);border-bottom:var(--rule)}
.ps-ideas a{display:block}
.ps-ideas canvas{width:100%;height:auto;aspect-ratio:1000/1414;box-shadow:0 10px 28px rgba(0,0,0,.4)}
.ps-ideas p{margin:8px 0 0;font-size:13px}
@media (max-width:900px){.ps{grid-template-columns:1fr}.ps-stage{position:static;border-right:0;border-bottom:var(--rule)}.ps-stage canvas{max-width:420px}.ps-ideas{grid-template-columns:repeat(2,1fr)}}
.ps-tabs{display:flex;gap:6px}.ps-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.ps-styles button[hidden]{display:none}
.ps-stage #ps-mock{width:100%;max-width:560px;height:auto;aspect-ratio:1;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.ps-kinds{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.ps-kinds button{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:3px;font-size:12px;line-height:1.2}
.ps-kinds canvas{width:100%;aspect-ratio:1;height:auto;outline:2px solid transparent;outline-offset:2px}
.ps-kinds button[aria-pressed="true"] canvas{outline-color:var(--ink)}
.ps-kinds button:focus-visible canvas{outline:2px dashed var(--ink)}
.ps-kinds b{font-size:13px} .ps-kinds span{color:var(--soft)}
.ps-src{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}
.ps-src button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.ps-opts{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0 16px}
.ps-opts label{display:grid;gap:4px;font-size:13px}
.ps-opts select{font:inherit;font-size:15px;padding:8px 10px;border:var(--rule);background:var(--bg);color:var(--ink)}
.ps-cat{font-weight:800;margin:14px 0 6px;font-size:14px}
#ps-kinds .ps-cat:first-child{margin-top:0}
/* Print Shop portal */
.pd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--pad);padding:var(--pad);border-bottom:var(--rule)}
.pd{display:flex;flex-direction:column;gap:10px;min-width:0}
.pd canvas{width:100%;height:auto;aspect-ratio:1;display:block}
.pd h3{margin:0;font-weight:900;font-stretch:120%;font-size:clamp(20px,1.8vw,26px)}
.pd p{margin:0}
.pd-sub{font-weight:700;font-size:14px}
.pd-price{color:var(--soft);font-size:14px;font-weight:700}
.pd-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.pc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:var(--pad);padding:var(--pad);border-bottom:var(--rule)}
.pc{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit;min-width:0}
.pc canvas{width:100%;height:auto;aspect-ratio:1;display:block;margin-bottom:6px;transition:transform .2s}
.pc:hover canvas{transform:translateY(-3px)}
.pc b{font-size:17px} .pc span{font-size:13px}
.pc-meta{color:var(--soft)}
.pd-steps{margin:0 0 16px;padding-left:20px}.pd-steps li{margin-bottom:8px}
/* Checkout dialog */
.co{width:min(520px,94vw);border:var(--rule);background:var(--bg);color:var(--ink);padding:0}
.co::backdrop{background:rgba(0,0,0,.6)}
.co form{display:grid;gap:10px;padding:20px}
.co h2{margin:0;font-weight:900;font-size:24px}
.co label{display:grid;gap:4px;font-size:13px}
.co input,.co textarea{font:inherit;font-size:16px;padding:8px 10px;border:var(--rule);background:transparent;color:var(--ink)}
.co .ps-row{justify-content:flex-end}
.co-err{color:#ffb4a8;font-weight:700;margin:0}

.co label[hidden],.co [hidden]{display:none!important}

/* ==== W.I.P Print Shop: a light store in the manner of the music-merch shops, with a New York edge ====
   Bebas Neue for display (self-hosted above), Helvetica for text, black and white with the W.I.P red. */
.shop,.bag,.co,.pv{--bg:#fff;--ink:#111;--soft:#6d6a64;--tile:#f3f2ee;--line:#e4e2dc;--red:#e2482b;--rule:1px solid var(--ink);--disp:"Bebas Neue","Oswald","Arial Narrow",sans-serif;--text:"Helvetica Neue",Helvetica,Arial,sans-serif;font-family:var(--text);color:var(--ink);background:var(--bg)}
.shop{padding-top:64px}
.shop a{color:inherit}
.shop h1,.shop h2,.shop h3{font-family:var(--disp);font-weight:400;letter-spacing:.01em;font-stretch:normal}
.sbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 24px;background:var(--ink);color:var(--bg)!important;font:400 20px/1 var(--disp);letter-spacing:.06em;text-decoration:none;border:1px solid var(--ink);cursor:pointer;transition:background .2s,color .2s}
.sbtn:hover{background:var(--red);border-color:var(--red)}
.sbtn.ghost{background:transparent;color:var(--ink)!important}
.sbtn.ghost:hover{background:var(--ink);color:var(--bg)!important}
.sbtn.light{background:#fff;color:#111!important;border-color:#fff}.sbtn.ghost.light{background:transparent;color:#fff!important}
.sbtn.ghost.light:hover{background:#fff;color:#111!important}
.sbtn.wide{width:100%}
.sbtn:disabled{opacity:.35;cursor:default}
.sbtn:focus-visible,.shop button:focus-visible,.pv button:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.sh-cta{display:flex;gap:10px;flex-wrap:wrap}
.sh-kick{display:flex;align-items:center;gap:8px;margin:0;font:700 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase}
.sh-kick.light{color:#fff}
.sh-dot{width:10px;height:10px;border-radius:50%;background:var(--red);display:inline-block}
.sh-h2{font-size:clamp(26px,2.6vw,40px);line-height:.95;margin:0}
.sh-h2.big{font-size:clamp(40px,5vw,80px);line-height:.88;margin:12px 0 14px}
.sh-h3{font-size:26px;margin:0}
.sh-lead{font-size:clamp(16px,1.3vw,19px);line-height:1.45;max-width:36em;margin:0 0 20px}
.sh-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sh-hint{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.sh-crumb{margin:0;font-size:13px;color:var(--soft)}
.sh-crumb a{text-decoration:none}.sh-crumb a:hover{text-decoration:underline}
.sh-note{padding:0 clamp(16px,4vw,56px);margin:0 0 14px;font-size:14px;color:var(--soft)}

/* ticker, like a Times Square crawl */
.tk{background:#111;color:#fff;overflow:hidden;border-bottom:1px solid #111}
.tk-in{display:flex;width:max-content;animation:tk 38s linear infinite}
.tk span,.tk i{font:400 17px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;padding:11px 18px;white-space:nowrap;font-style:normal}
.tk i{color:var(--red);padding:11px 0}
@keyframes tk{to{transform:translateX(-50%)}}

/* hero: the words rise into place line by line */
.sh-hero{position:relative;padding:clamp(36px,6vw,90px) clamp(16px,4vw,56px) clamp(30px,4vw,60px);background:var(--red);color:#111;overflow:hidden;border-bottom:1px solid #111}
.sh-hero::after{content:"";position:absolute;right:-6vw;top:-10vw;width:46vw;height:46vw;border-radius:50%;border:2px solid rgba(17,17,17,.9);pointer-events:none}
.sh-h1{font-size:clamp(70px,15vw,260px);line-height:.82;margin:18px 0 26px;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:0 .22em}
.sh-h1>span{display:inline-block;overflow:hidden;padding-top:.06em}
.sh-h1>span>span{display:inline-block;animation:rise .9s cubic-bezier(.2,.9,.1,1) both}
.sh-h1>span:nth-child(2)>span{animation-delay:.08s}.sh-h1>span:nth-child(3)>span{animation-delay:.16s}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.sh-hero-b{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;position:relative;z-index:1}
.sh-hero-b p{margin:0;max-width:30em;font-size:clamp(16px,1.4vw,20px);line-height:1.4;font-weight:500}
.sh-hero .sbtn:hover{background:#fff;color:#111!important;border-color:#fff}

/* shop by show: logo tiles */
.sh-rail{padding:clamp(28px,4vw,52px) clamp(16px,4vw,56px) 10px}
.rail{display:flex;gap:12px;overflow-x:auto;padding:16px 0 20px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.rail-t{all:unset;cursor:pointer;flex:0 0 clamp(112px,10vw,140px);aspect-ratio:1;background:var(--tile);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px;box-sizing:border-box;text-align:center;scroll-snap-align:start;transition:background .25s,color .25s,transform .25s;position:relative;text-decoration:none}
.rail-t img{width:52%;height:auto;max-height:52%;object-fit:contain;filter:brightness(0);transition:filter .25s}
.rail-t b{font:400 clamp(17px,1.4vw,21px)/1 var(--disp);letter-spacing:.04em;text-transform:uppercase}
.rail-t span{display:none;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);line-height:1.25}
.rail-t:hover{transform:translateY(-3px)}
.rail-t[aria-pressed="true"],.rail-t:hover{background:#111;color:#fff}
.rail-t[aria-pressed="true"] img,.rail-t:hover img{filter:brightness(0) invert(1)}
.rail-t[aria-pressed="true"] span,.rail-t:hover span{color:#bbb}
.rail-t.rail-pc{background:var(--red)}
.rail-t:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* store: filters on the left, products on the right */
.sh-main{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(20px,3vw,48px);padding:clamp(20px,3vw,40px) clamp(16px,4vw,56px) 40px;border-top:1px solid var(--line);scroll-margin-top:70px}
.sh-side{position:sticky;top:84px;align-self:start;max-height:calc(100vh - 100px);overflow:auto}
.sh-side-h{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:10px;border-bottom:1px solid var(--ink)}
.sh-clear{all:unset;cursor:pointer;font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
.sh-side details{border-bottom:1px solid var(--line);padding:12px 0}
.sh-side summary{cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between}
.sh-side summary::after{content:"+";font-weight:400}.sh-side details[open] summary::after{content:"–"}
.sh-side summary::-webkit-details-marker{display:none}
.fl{display:flex;flex-direction:column;gap:2px;padding-top:10px}
.fl button{all:unset;cursor:pointer;font-size:14px;padding:5px 0 5px 26px;position:relative}
.fl button::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border:1px solid var(--ink)}
.fl button[aria-pressed="true"]::before{background:var(--ink);box-shadow:inset 0 0 0 3px #fff}
.fl button:hover{text-decoration:underline}
.fl-sw{flex-direction:row;flex-wrap:wrap;gap:8px}
.fl-sw button{width:26px;height:26px;padding:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.fl-sw button::before{display:none}
.fl-sw button[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
.fl-sz{flex-direction:row;flex-wrap:wrap;gap:6px}
.fl-sz button{padding:7px 0;width:46px;text-align:center;border:1px solid var(--line);font-size:13px}
.fl-sz button::before{display:none}
.fl-sz button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.sh-done{display:none}
.sh-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--ink);margin-bottom:24px}
.sh-bar .sh-crumb{margin-right:auto}
.sh-n{margin:0;font-size:13px;color:var(--soft)}
.sh-sort{font-size:12px;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.sh-sort select{font:14px var(--text);letter-spacing:0;text-transform:none;border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 28px 8px 10px;border-radius:0}
.sh-ftoggle{display:none}
.sh-empty{padding:40px 0;text-align:center;color:var(--soft)}

.sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 18px}
.sc{min-width:0;view-transition-class:card}
.sc[hidden]{display:none}
.sc-img{all:unset;cursor:pointer;display:block;position:relative;aspect-ratio:1;overflow:hidden;background:var(--tile);width:100%}
.sc-img canvas,.sc-img img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .5s ease,transform 1.1s cubic-bezier(.2,.9,.1,1)}
.sc-img img{object-fit:contain;padding:12%;box-sizing:border-box;filter:drop-shadow(0 10px 16px rgba(0,0,0,.18))}
.sc-img .sc-alt{opacity:0}
.sc-img:hover .sc-alt,.sc-img:focus-visible .sc-alt{opacity:1}
.sc-img:hover>*{transform:scale(1.035)}
.sc-badge{position:absolute;left:12px;top:12px;font:400 15px/1 var(--disp);letter-spacing:.08em;background:var(--red);color:#fff;padding:6px 9px 5px;transform:none!important}
.sc-badge.soon{background:#111}
.sc-badge.plain{background:#fff;color:#111}
.sc-q{position:absolute;left:0;right:0;bottom:0;background:#111;color:#fff;text-align:center;font:400 17px/1 var(--disp);letter-spacing:.1em;padding:13px 0 12px;transform:translateY(100%)!important;transition:transform .35s cubic-bezier(.2,.9,.1,1)!important}
.sc-img:hover .sc-q,.sc-img:focus-visible .sc-q{transform:none!important}
.sc-img:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.sc-t{text-align:center;padding-top:14px}
.sc-t h3{font-size:clamp(16px,1.15vw,19px);line-height:1.1;letter-spacing:.03em;margin:0 0 4px;text-transform:uppercase}
.sc-t p{margin:0;font-size:13px;color:var(--soft);line-height:1.35}
.sc-t .sc-p{font:600 13px/1 var(--text);letter-spacing:.02em;color:var(--ink);margin-top:8px}
.sc-sw{display:flex;gap:5px;align-items:center;justify-content:center;margin-top:10px!important;font-size:11px}
.sc-sw span{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
.pager{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;padding:40px 0 10px}
.pager button{all:unset;cursor:pointer;min-width:44px;height:44px;display:grid;place-items:center;font:400 20px/1 var(--disp);border:1px solid transparent}
.pager button:hover{border-color:var(--ink)}
.pager button[aria-current="page"]{background:var(--ink);color:#fff}
.pager button:disabled{opacity:.25;cursor:default;border-color:transparent}

/* product view: a full product page in a sheet */
.pv{width:min(1240px,100vw);max-width:100vw;max-height:100dvh;height:min(860px,100dvh);margin:auto;border:0;padding:0;overflow:auto}
.pv::backdrop{background:rgba(17,17,17,.55);backdrop-filter:blur(4px)}
.pv[open]{animation:pvin .45s cubic-bezier(.2,.9,.1,1)}
@keyframes pvin{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.pv-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);min-height:100%}
.pv-pics{background:var(--tile);padding:clamp(16px,2.4vw,32px);display:flex;flex-direction:column;gap:14px}
.pv-pics>canvas{width:100%;height:auto;aspect-ratio:1;display:block}
.pv-pics>canvas.in{animation:fadein .4s ease}
@keyframes fadein{from{opacity:.2}to{opacity:1}}
.pv-thumbs{display:flex;gap:8px}
.pv-thumbs button{all:unset;cursor:pointer;width:clamp(56px,7vw,84px);aspect-ratio:1;border:1px solid transparent;background:#fff}
.pv-thumbs canvas{width:100%;height:100%;display:block}
.pv-thumbs button[aria-pressed="true"]{border-color:var(--ink)}
.pv-txt{padding:clamp(20px,3vw,44px);position:relative}
.pv-x{all:unset;cursor:pointer;position:absolute;right:18px;top:14px;font-size:22px;width:40px;height:40px;display:grid;place-items:center}
.pv-x:hover{color:var(--red)}
.pv-h{font:400 clamp(30px,3vw,44px)/.95 var(--disp);margin:10px 0 6px;text-transform:uppercase}
.pv-sub{margin:0;color:var(--soft);font-size:14px}
.pv-price{font:400 24px/1 var(--disp);letter-spacing:.03em;margin:18px 0 8px}
.pv-stock{display:flex;align-items:center;gap:8px;font-size:13px;margin:0 0 18px;color:var(--soft)}
.pv-stock::before{content:"";width:8px;height:8px;border-radius:50%;background:#aaa;flex:none}
.pv-stock.ok::before{background:#1f9d55}
.pv-opt{margin:0 0 18px}
.pv-l{margin:0 0 9px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.pv-l span{font-weight:400;letter-spacing:.02em;text-transform:none}
.pv-sw{display:flex;gap:10px;flex-wrap:wrap}
.pv-sw button{all:unset;cursor:pointer;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);position:relative}
.pv-sw button[aria-pressed="true"]{outline:1px solid var(--ink);outline-offset:3px}
.pv-sw button[aria-pressed="true"]::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:#111}
.pv-sw button.dk[aria-pressed="true"]::after{color:#fff}
.pv-chips{display:flex;gap:6px;flex-wrap:wrap}
.pv-chips button{all:unset;cursor:pointer;min-width:30px;text-align:center;padding:10px 14px;border:1px solid var(--line);font-size:14px;transition:border-color .15s}
.pv-chips button:hover{border-color:var(--ink)}
.pv-chips button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pv-help{font-size:13px;color:var(--soft);margin:-8px 0 18px}
.pv-qty{margin:0 0 18px}.pv-qty .pv-l{display:block}
.qty{display:inline-flex;border:1px solid var(--line)}
.qty button{all:unset;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;font-size:18px}
.qty output{width:44px;display:grid;place-items:center;font-size:15px}
.pv .sbtn.wide{margin-bottom:10px;min-height:52px;font-size:22px}
.pv-acc{border-top:1px solid var(--line);padding:14px 0}
.pv-acc:last-child{border-bottom:1px solid var(--line)}
.pv-acc summary{cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between}
.pv-acc summary::after{content:"+"}.pv-acc[open] summary::after{content:"–"}
.pv-acc summary::-webkit-details-marker{display:none}
.pv-acc p{font-size:14px;line-height:1.5;margin:10px 0 0;color:#333}

/* postcards */
.pcw{border-top:1px solid #111;padding:clamp(36px,5vw,72px) 0 0}
.pcw-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(20px,4vw,60px);padding:0 clamp(16px,4vw,56px) 20px;align-items:end}
.pcw-styles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pcw-styles button{all:unset;cursor:pointer;display:grid;gap:8px;font-size:13px;text-align:center}
.pcw-styles img{width:100%;height:auto;display:block;box-shadow:0 8px 18px rgba(0,0,0,.18);outline:2px solid transparent;outline-offset:4px;transition:transform .3s}
.pcw-styles button:hover img{transform:translateY(-3px)}
.pcw-styles button[aria-pressed="true"] img{outline-color:var(--ink)}
.pcw-styles b{font:400 18px/1 var(--disp);letter-spacing:.05em}
.pcw .sh-bar{padding:0 clamp(16px,4vw,56px) 14px;margin:0;border-bottom:1px solid var(--line)}
.segs{display:inline-flex;border:1px solid var(--ink)}
.segs button{all:unset;cursor:pointer;padding:9px 18px;font:400 18px/1 var(--disp);letter-spacing:.06em}
.segs button[aria-pressed="true"]{background:var(--ink);color:#fff}
.pcw-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 18px;padding:28px clamp(16px,4vw,56px) 0;scroll-margin-top:90px}
.pcw-card{min-width:0}
.pcw-flip{all:unset;cursor:pointer;display:block;width:100%;aspect-ratio:560/398;perspective:1400px}
.pcw-in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.9,.1,1)}
.pcw-flip[aria-pressed="true"] .pcw-in{transform:rotateY(180deg)}
.pcw-in img{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;box-shadow:0 8px 18px rgba(0,0,0,.16);background:#fff}
.pcw-in img.b{transform:rotateY(180deg)}
.pcw-flip:hover .pcw-in{transform:translateY(-3px)}.pcw-flip[aria-pressed="true"]:hover .pcw-in{transform:rotateY(180deg) translateY(-3px)}
.pcw-flip:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.pcw-card label{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:13px;cursor:pointer}
.pcw-card label span{display:grid;gap:2px}
.pcw-card label b{font:400 16px/1.1 var(--disp);letter-spacing:.03em}
.pcw-card small{color:var(--soft)}
.pcw-card input{width:18px;height:18px;accent-color:#111;margin-top:1px;flex:none}
.pcw-card.on .pcw-flip{outline:2px solid var(--red);outline-offset:5px}
.pcw-bar{position:sticky;bottom:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px clamp(16px,4vw,56px);padding-right:clamp(150px,12vw,180px);border-top:1px solid #111;background:#fff;margin-top:20px}
.pcw-bar p{margin:0;font-size:14px}
.pcw .pager{padding:30px 0 0}

/* make your own: black band with the ten styles drifting past */
.sh-diy{background:#111;color:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,4vw,60px);align-items:center;padding:clamp(40px,6vw,90px) 0 clamp(40px,6vw,90px) clamp(16px,4vw,56px);overflow:hidden;margin-top:clamp(40px,5vw,70px)}
.sh-diy .sh-lead{color:#ddd}
.sh-diy>div:first-child{position:relative;z-index:2;background:#111;padding-right:clamp(16px,3vw,40px);box-shadow:40px 0 40px -10px #111}
.diy-strip{display:flex;width:max-content;animation:tk 60s linear infinite}
.diy-row{display:flex;gap:14px;padding-right:14px}
.diy-row canvas{width:clamp(130px,12vw,180px);height:auto;aspect-ratio:300/424;box-shadow:0 14px 30px rgba(0,0,0,.5)}

/* how it works */
.sh-how{padding:clamp(40px,5vw,80px) clamp(16px,4vw,56px)}
.sh-how ol{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #111}
.sh-how li{padding:20px 20px 20px 0;border-right:1px solid var(--line)}
.sh-how li+li{padding-left:20px}.sh-how li:last-child{border-right:0}
.sh-how li b{font:400 34px/1 var(--disp);color:var(--red)}
.sh-how h3{font-size:24px;margin:8px 0}
.sh-how li p{margin:0;font-size:14px;line-height:1.5;color:#333}
.sh-fine{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--soft)}
.sh-fine p{margin:0}

/* bag (shared with the studio) */
.bag-btn{all:unset;cursor:pointer;position:fixed;right:18px;bottom:18px;z-index:20;display:flex;gap:10px;align-items:center;background:#111;color:#fff;padding:13px 18px;font:400 20px/1 "Bebas Neue","Arial Narrow",sans-serif;letter-spacing:.08em;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.bag-btn b{background:#e2482b;color:#fff;border-radius:999px;min-width:24px;height:24px;display:grid;place-items:center;font:700 13px/1 Helvetica,Arial,sans-serif}
.bag-btn[hidden]{display:none}
.bag-btn:focus-visible{outline:3px solid #e2482b;outline-offset:4px}
.bag{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(440px,100vw);border:0;border-left:1px solid #111;padding:0;display:flex;flex-direction:column}
.bag:not([open]){display:none}
.bag[open]{animation:bagin .4s cubic-bezier(.2,.9,.1,1)}
@keyframes bagin{from{transform:translateX(60px);opacity:0}to{transform:none;opacity:1}}
.bag::backdrop{background:rgba(17,17,17,.5);backdrop-filter:blur(3px)}
.bag-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid #111}
.bag-head h2{margin:0;font:400 34px/1 var(--disp)}
.bag-head .btn{all:unset;cursor:pointer;font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:underline}
.bag-list{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
.bag-item{display:grid;grid-template-columns:80px 1fr;gap:14px;padding:16px 22px;border-bottom:1px solid var(--line)}
.bag-item img{width:80px;height:80px;object-fit:cover;background:var(--tile)}
.bag-t{display:grid;gap:3px;font-size:13px}
.bag-t b{font:400 20px/1 var(--disp);letter-spacing:.03em}
.bag-t span,.bag-t small{color:var(--soft)}
.bag-q{grid-column:2;display:flex;gap:0;align-items:center}
.bag-q button{all:unset;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line)}
.bag-q>span{width:34px;text-align:center}
.bag-q .bag-rm{width:auto;border:0;text-decoration:underline;margin-left:auto;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.bag-empty{padding:22px;color:var(--soft)}
.bag-foot{padding:18px 22px;border-top:1px solid #111;display:grid;gap:12px}
.bag-foot .btn{display:flex;align-items:center;justify-content:center;min-height:52px;background:#111;color:#fff;font:400 22px/1 var(--disp);letter-spacing:.06em;text-decoration:none}
.bag-foot .btn:hover{background:var(--red)}
.bag .ps-note{color:var(--soft);font-size:13px;margin:0}

/* checkout */
.co{border:1px solid #111}
.co h2{font:400 34px/1 var(--disp);letter-spacing:.02em}
.co .btn{all:unset;cursor:pointer;min-height:44px;padding:0 20px;display:inline-flex;align-items:center;border:1px solid #111;font:400 20px/1 var(--disp);letter-spacing:.05em}
.co .btn.solid{background:#111;color:#fff}
.co input,.co textarea{border:1px solid #cfccc4}
.co-err{color:#b3261e}
.co .ps-note{color:var(--soft)}

/* studio, in the shop's colours */
.shop-studio{padding-top:0}
.shop-studio .page-head{padding-top:130px;border-bottom:1px solid #111}
.shop-studio .page-head h1{font:400 clamp(60px,10vw,160px)/.85 var(--disp);text-transform:uppercase;max-width:none}
.shop-studio .page-head .kicker{font:700 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase}
.shop-studio .btn{border-radius:0;font-family:var(--disp);font-weight:400;letter-spacing:.05em;font-size:18px}
.shop-studio .btn.solid{background:#111;color:#fff;border-color:#111}
.shop-studio .ps-h{font:400 30px/1 var(--disp);letter-spacing:.03em}
.shop-studio .ps-stage{background:var(--tile)}
.shop-studio .ps-stage canvas{box-shadow:0 18px 40px rgba(0,0,0,.18)}
.shop-studio .ps-stage #ps-mock{box-shadow:none}
.shop-studio .head,.shop-studio .h2{font-family:var(--disp);font-weight:400}
.shop-studio .qv-views{display:flex;gap:6px}
.shop-studio .qv-views .btn[aria-pressed="true"]{background:#111;color:#fff}
.shop-studio .qv-oh{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.shop-studio .qv-oh span{font-weight:400;text-transform:none;letter-spacing:0}
.shop-studio .qv-opt{margin:0 0 16px}
.shop-studio .qv-sw{display:flex;gap:10px;flex-wrap:wrap}
.shop-studio .qv-sw button{all:unset;cursor:pointer;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.shop-studio .qv-sw button[aria-pressed="true"]{outline:1px solid #111;outline-offset:3px}
.shop-studio .qv-chips{display:flex;gap:6px;flex-wrap:wrap}
.shop-studio .qv-chips button{all:unset;cursor:pointer;padding:9px 13px;border:1px solid var(--line);font-size:14px}
.shop-studio .qv-chips button[aria-pressed="true"]{border-color:#111;box-shadow:inset 0 0 0 1px #111}

@media (max-width:1100px){.sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.pcw-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pcw-head{grid-template-columns:1fr}}
@media (max-width:860px){
  .sh-main{grid-template-columns:1fr}
  .sh-side{position:fixed;inset:0;z-index:40;background:#fff;max-height:none;padding:22px;transform:translateX(-100%);transition:transform .35s cubic-bezier(.2,.9,.1,1)}
  .sh-side.open{transform:none}
  .sh-done{display:flex;width:100%;margin-top:20px}
  .sh-ftoggle{display:inline-flex;min-height:38px;font-size:17px;padding:0 16px}
  .sh-bar .sh-crumb{width:100%}
  .sh-diy{grid-template-columns:1fr;padding-right:clamp(16px,4vw,56px)}
  .sh-how ol{grid-template-columns:1fr 1fr}.sh-how li{border-right:0;border-bottom:1px solid var(--line);padding:18px 0!important}
  .sh-fine{grid-template-columns:1fr}
  .pv-in{grid-template-columns:1fr}.pv{height:100dvh}
}
@media (max-width:560px){
  .sgrid,.pcw-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 10px}
  .sc-t h3{font-size:15px}.sc-t p{font-size:12px}
  .sc-q{display:none}
  .pcw-styles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pcw-bar{padding-right:16px;padding-bottom:84px}
  .sh-how ol{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.tk-in,.diy-strip{animation:none}.sh-h1>span>span{animation:none}.pcw-in{transition:none}.pv[open],.bag[open]{animation:none}}

/* Available now on Kadak Merch */
.kd{padding:clamp(28px,4vw,56px) clamp(16px,4vw,56px) clamp(20px,3vw,36px);border-bottom:1px solid var(--line,#ddd)}
.kd-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 40px}
.kd-lede{max-width:52ch;margin:0 0 14px;color:var(--soft)}
.kd-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.kd-chip{font:600 13px/1 inherit;letter-spacing:.06em;text-transform:uppercase;padding:9px 14px;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer}
.kd-chip[aria-pressed="true"]{background:#111;color:#fff;border-color:#111}
.kd-rail{display:flex;gap:16px;overflow-x:auto;padding:16px 0 18px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.kd-card{flex:0 0 clamp(190px,19vw,260px);scroll-snap-align:start;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px}
.kd-card[hidden]{display:none}
.kd-img{display:block;aspect-ratio:1;background:var(--tile,#f2f0eb);overflow:hidden}
.kd-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.kd-card:hover .kd-img img,.kd-card:focus-visible .kd-img img{transform:scale(1.05)}
.kd-name{font-weight:700;font-size:15px;line-height:1.25}
.kd-meta{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:14px}
.kd-meta s{color:var(--soft)}
.kd-go{margin-left:auto;font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px}
.kd-note{font-size:13px;color:var(--soft);margin:4px 0 0;max-width:80ch}
.kd-note a{color:inherit}