/* Retrace The Lines — store pages (rendered by the Worker). */
/* ---- fonts, served from this domain (both SIL Open Font License) ---- */
/* Archivo is one variable file: weight 100-900 and width 62%-125% (condensed UI text to expanded display) */
@font-face{font-family:'Archivo';src:url(/assets/fonts/archivo-latin-wdth.e3a28ead.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-latin-400.08949f72.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* ---- base ---- */
html{background:#000;-webkit-text-size-adjust:100%}
/* images carry width/height attributes so the page does not jump while they load; CSS still decides the size */
img{height:auto}
/* visible keyboard focus everywhere */
:focus-visible{outline:3px solid #FF80B5;outline-offset:3px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:#000}
a{color:inherit;text-decoration:none}
a:hover{color:#FF80B5}
.on-light a:hover{color:#000;text-decoration:underline;text-decoration-color:#FF80B5;text-decoration-thickness:3px;text-underline-offset:4px}
a.btn-pink:hover{color:#000}
a.btn-dark:hover{color:#FF80B5}
@keyframes rtl-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---- motion: plays once on load ---- */
@keyframes rtl-zoom{from{scale:1.08}to{scale:1}}
@keyframes rtl-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rtl-up{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
@keyframes rtl-slap{from{opacity:0;scale:1.7;rotate:-16deg}55%{opacity:1}to{opacity:1;scale:1;rotate:0deg}}
@keyframes rtl-slide{from{opacity:0;translate:56px 14px;rotate:10deg}to{opacity:1;translate:0 0;rotate:0deg}}
.a-zoom{animation:rtl-zoom 1.8s cubic-bezier(.2,.7,.2,1) both}
.a-wipe{animation:rtl-wipe .9s cubic-bezier(.7,0,.2,1) .2s both}
.a-up{animation:rtl-up .6s cubic-bezier(.2,.7,.2,1) .75s both}
.a-up2{animation:rtl-up .6s cubic-bezier(.2,.7,.2,1) .95s both}
/* ---- motion: tied to scroll position (native scroll-driven animations; static where unsupported) ---- */
@supports (animation-timeline: view()){
.s-up{animation:rtl-up linear both;animation-timeline:view(0px 80px);animation-range:entry 0% entry 100%}
.s-up-lg{animation:rtl-up linear both;animation-timeline:view(0px 60px);animation-range:entry 0% entry 45%}
.s-wipe{animation:rtl-wipe linear both;animation-timeline:view(0px 170px);animation-range:entry 0% entry 100%}
.s-slap{animation:rtl-slap linear both;animation-timeline:view(0px 150px);animation-range:entry 0% entry 100%}
.s-slide{animation:rtl-slide linear both;animation-timeline:view(0px 110px);animation-range:entry 0% entry 100%}
}
/* ---- motion: hover / press ---- */
.btn{transition:translate .12s ease,box-shadow .12s ease}
.btn:hover{translate:-3px -3px;box-shadow:5px 5px 0 #FF80B5}
/* a pink button, or a button sitting on pink, keeps the white shadow so it still reads */
.btn-pink:hover,.btn-on-pink:hover{box-shadow:5px 5px 0 #F9F9F9}
.btn:active{translate:0 0;box-shadow:0 0 0 transparent}
.hov-play>span{transition:scale .15s ease,background-color .15s ease}
.hov-play:hover>span{scale:1.18;background:#F9F9F9!important}
a svg[stroke]{transition:translate .15s ease}
a:hover svg[stroke]{translate:2px -2px}
.nav-u a:not(.btn){background:linear-gradient(#FF80B5,#FF80B5) 0 calc(100% - 9px)/0 3px no-repeat;transition:background-size .2s ease}
.nav-u a:not(.btn):hover{background-size:100% 3px;color:inherit}
/* language switch: the lit half is the current language, the other half is the link */
.lang-sw a:hover{background:#F9F9F9!important;color:#000!important}
.hov-zoom{overflow:hidden}
.hov-zoom img{transition:scale .6s cubic-bezier(.2,.7,.2,1)}
.hov-zoom:hover img{scale:1.035}
.hov-lift img{transition:translate .18s ease,box-shadow .18s ease}
.hov-lift:hover img{translate:-4px -4px;box-shadow:8px 8px 0 #FF80B5}
.hov-row>span:first-of-type,.hov-row>img+span{transition:translate .18s ease}
.hov-row:hover>span:first-of-type,.hov-row:hover>img+span{translate:10px 0}
/* video rows: the whole row is the link; thumbnail lifts like a button, play badge and Watch button light up */
.hov-vid .vid-thumb{transition:translate .12s ease,box-shadow .12s ease}
.hov-vid:hover .vid-thumb{translate:-3px -3px;box-shadow:5px 5px 0 #FF80B5}
.hov-vid .vid-badge{transition:scale .15s ease,background-color .15s ease}
.hov-vid:hover .vid-badge{scale:1.18;background:#F9F9F9!important}
.hov-vid .vid-title{transition:translate .18s ease}
.hov-vid:hover .vid-title{translate:10px 0}
.hov-vid .vid-btn{transition:background-color .12s ease,border-color .12s ease,color .12s ease}
.hov-vid:hover .vid-btn{background:#FF80B5;border-color:#FF80B5!important;color:#000}
.hov-vid .vid-btn svg{transition:translate .15s ease}
.hov-vid:hover .vid-btn svg{translate:3px 0}
.hov-vid:active .vid-thumb{translate:0 0;box-shadow:0 0 0 transparent}
.hov-member img{transition:filter .25s ease,translate .12s ease,box-shadow .12s ease}
.hov-member:hover img{filter:contrast(1.12) brightness(1.1);translate:-3px -3px;box-shadow:5px 5px 0 #F9F9F9}
.hov-member:active img{translate:0 0;box-shadow:0 0 0 transparent}
.hov-member:hover figcaption span:first-child{color:#FF80B5}
/* ---- live carousel: slide position comes from [data-shot] (set by the component state) ---- */
.car-track{transition:translate .5s cubic-bezier(.7,0,.2,1)}
.car[data-shot="1"] .car-track{translate:-100% 0}
.car[data-shot="2"] .car-track{translate:-200% 0}
.car[data-shot="3"] .car-track{translate:-300% 0}
.car[data-shot="4"] .car-track{translate:-400% 0}
.car-view{transition:translate .18s ease,box-shadow .18s ease}
.car-vig{opacity:0;transition:opacity .3s ease;background:radial-gradient(ellipse at 50% 50%,rgba(255,128,181,0) 38%,rgba(255,128,181,.55) 78%,rgba(255,128,181,.95) 100%);mix-blend-mode:screen}
@media (hover:hover){
.car:hover .car-vig{opacity:1}
.car:hover .car-view{translate:-4px -4px;box-shadow:8px 8px 0 #FF80B5}
}
.car-btn{transition:background-color .12s ease,color .12s ease}
.car-btn:hover,.car-btn:focus-visible{background:#FF80B5!important;color:#000!important}
/* ---- brush arrow beside the store button: from the left on wide screens, from the right when the button drops under the title, hidden in between (no room) ---- */
.mk-store-arrow{position:absolute;top:50%;right:calc(100% + 36px);width:100px;max-width:none;height:auto;translate:0 -50%;rotate:6deg;pointer-events:none}
@media (max-width:879px){.mk-store-arrow{display:none}}
@media (max-width:540px){.mk-store-arrow{display:block;right:auto;left:calc(100% + 36px);scale:-1 1;rotate:-6deg}}
/* ---- folds: on wide screens they are always open and their toggles are hidden ---- */
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
.m-fold>summary,.m-menu>summary{display:none}
.fold-ic{transition:rotate .18s ease}
details[open]>summary .fold-ic{rotate:45deg}
/* ---- anything narrower than a desktop (1260px and under): the hero call-to-action no longer fits beside the logo, so both are centred ---- */
@media (max-width:1260px){
.hero-wm{flex:1 1 100%!important;max-width:780px;margin:0 auto!important}
.m-cta{align-items:center!important}
.m-cta>div{justify-content:center}
}
/* ---- tablets (701px to 1100px): PAIN beside its links, even grids, footer links in rows ---- */
@media (min-width:701px) and (max-width:1100px){
.pain-col{flex-direction:row!important;flex-wrap:wrap;align-items:center;gap:0 40px}
.pain-col>p{flex:1 1 100%}
.pain-col>h2{flex:0 0 auto;align-self:center!important;margin:28px 0!important}
.pain-col>#listen{flex:1 1 260px;margin-top:0!important}
.m-2col{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.m-scroll{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.m-foot>nav{flex:1 1 100%!important;flex-direction:row!important;flex-wrap:wrap;gap:0 28px;padding-top:10px;border-top:1px solid #2B2B2B}
}
/* ---- phones (700px and under): menu, folded tracklist, tighter grids ---- */
@media (max-width:700px){
.m-hide{display:none!important}
.m-2col{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
/* header stays on screen; its links drop down over the page */
.m-head{position:sticky;top:0;z-index:30}
.m-head img{height:36px!important}
.m-menu>summary{display:inline-flex;align-items:center;gap:10px;box-sizing:border-box;height:44px;padding:0 14px;border:2px solid #F9F9F9;font-stretch:62%;font-weight:800;font-size:18px;letter-spacing:.08em;text-transform:uppercase}
.m-menu[open]>summary{background:#F9F9F9;color:#000}
.m-menu>nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch!important;gap:0!important;padding:0 16px 16px;background:#000;border-bottom:1px solid #2B2B2B}
.m-menu>nav a:not(.btn){border-top:1px solid #2B2B2B}
.m-menu>nav .btn{justify-content:center;margin-top:12px}
/* jumping to a section leaves room for the sticky header */
section[id],footer[id]{scroll-margin-top:64px}
.m-half{flex-basis:140px!important}
/* video rows: small thumbnail, title beside it */
.hov-vid{flex-wrap:nowrap!important;gap:14px!important}
.hov-vid .vid-thumb{width:112px!important}
.hov-vid .vid-badge{width:24px!important;height:24px!important;left:6px!important;bottom:6px!important}
.hov-vid .vid-title{flex:1 1 0!important;font-size:22px!important}
/* tracklist fold */
.m-fold>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;border-top:2px solid #000;border-bottom:2px solid #000;font-stretch:62%;font-weight:800;font-size:22px;letter-spacing:.06em;text-transform:uppercase}
.m-fold[open]>summary{border-bottom:0}
.fold-meta{display:inline-flex;align-items:center;gap:12px;font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-stretch:100%;font-weight:400;font-size:12px;letter-spacing:.06em}
/* shows: date, city and button on one line */
.show-row{flex-wrap:nowrap!important;gap:12px!important}
.show-row>span:first-child{flex-basis:62px!important}
.show-row>span:nth-child(2){flex:1 1 0!important}
.show-row>span:nth-child(2)>span:first-child{font-size:20px!important}
.show-row>.btn{height:40px!important;padding:0 12px!important;font-size:15px!important}
/* band: one row to swipe sideways, a third card peeking in to say so */
.m-scroll{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:-16px;padding:6px 16px 6px 0;-webkit-overflow-scrolling:touch}
.m-scroll::-webkit-scrollbar{display:none}
.m-scroll>*{flex:0 0 43%;scroll-snap-align:start;animation:none!important}
.m-foot{gap:36px 32px!important}
}
.rtl-ticker:hover{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.rtl-ticker,.a-zoom,.a-wipe,.a-up,.a-up2,.s-up,.s-up-lg,.s-wipe,.s-slap,.s-slide{animation:none!important}.btn,.hov-play>span,.hov-vid .vid-thumb,.hov-vid .vid-badge,.hov-vid .vid-title,.hov-vid .vid-btn,.hov-zoom img,.hov-lift img,.hov-member img,.hov-row>span,a svg,.car-track,.car-view,.car-vig,.fold-ic{transition:none!important}}

/* ---- store: Persona-style collage ---- */
.p5-stage{position:relative;background:#000;color:#F9F9F9;overflow:hidden;padding-bottom:110px}
.p5-ticker{position:relative;z-index:2;background:#FF80B5;color:#000;height:44px;overflow:hidden;display:flex;align-items:center}
.p5-ticker.mid{grid-column:1 / -1;justify-self:center;width:calc(100vw + 60px);margin:18px 0 6px;transform:skewY(-1.4deg);box-shadow:0 6px 0 #F9F9F9}
.p5-ticker.mid:nth-of-type(odd){transform:skewY(1.2deg)}
.bolt{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.bolt polygon{fill:#FF80B5}
@keyframes rtl-bolt{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.bolt.draw{animation:rtl-bolt 1.6s cubic-bezier(.6,0,.2,1) .2s both}
.star{position:absolute;pointer-events:none;z-index:1;animation:rtl-twinkle var(--d,6s) ease-in-out infinite}
@keyframes rtl-twinkle{0%,100%{transform:scale(1) rotate(0deg);opacity:.9}50%{transform:scale(.55) rotate(45deg);opacity:.5}}
.p5-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:64px 40px;max-width:1440px;margin:0 auto;padding:40px clamp(16px,3.4vw,48px) 0;box-sizing:border-box;align-items:start}
.p5-menu{position:sticky;top:12px;z-index:30;display:flex;gap:10px;flex-wrap:wrap;max-width:1440px;margin:28px auto 0;padding:0 clamp(16px,3.4vw,48px);box-sizing:border-box}
.p5-menu a{position:relative;display:inline-flex;align-items:baseline;gap:10px;padding:10px 22px 10px 18px;background:#000;color:#F9F9F9;border:3px solid #F9F9F9;transform:skewX(-14deg);font-stretch:62%;font-weight:800;font-size:19px;letter-spacing:.08em;text-transform:uppercase;transition:translate .12s ease,background-color .12s ease,color .12s ease,border-color .12s ease}
.p5-menu a>*{display:inline-block;transform:skewX(14deg)}.p5-menu a i{font-style:normal;font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:12px;color:#FF80B5}
.p5-menu a.on,.p5-menu a:hover{background:#FF80B5;color:#000;border-color:#FF80B5;translate:4px -4px}.p5-menu a.on i,.p5-menu a:hover i{color:#000}
.p5-eyebrow{position:relative;z-index:3;display:inline-block;margin:0 0 48px;padding:6px 12px;background:transparent;border:2px solid #F9F9F9;transform:skewX(-10deg);font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#F9F9F9}
.p5-eyebrow>span{display:inline-block;transform:skewX(10deg)}
.p5-title{position:relative;z-index:2;padding-top:10px}
.p5-title h1{margin:0;font-stretch:125%;font-weight:900;font-size:clamp(46px,6.2vw,90px);line-height:.78;letter-spacing:-.05em;text-transform:uppercase;display:flex;flex-direction:column;align-items:flex-start}
.p5-title h1 .w1{display:inline-block;padding:0 .12em;background:#F9F9F9;color:#000;transform:rotate(-4deg) skewX(-8deg);transform-origin:left bottom}
.p5-title h1 .w2{display:inline-block;margin-left:.5em;white-space:nowrap;margin-top:.04em;color:#F9F9F9;text-shadow:8px 8px 0 #FF80B5,8px 8px 0 #FF80B5;transform:rotate(2deg)}
.p5-lead{margin:30px 0 0;max-width:40ch;font-size:clamp(17px,1.3vw,19px);line-height:1.5;font-weight:500;padding:14px 18px;background:#000;border-left:4px solid #FF80B5}
.p5-notice{position:relative;z-index:2;box-sizing:border-box;padding:26px 30px 28px;background:#000;border:3px solid #F9F9F9;transform:skewX(-6deg) rotate(1.5deg);box-shadow:10px 10px 0 #FF80B5;margin-top:28px}
.p5-notice>*{transform:skewX(6deg)}
.p5-notice .k{display:inline-block;padding:5px 12px;background:#FF80B5;color:#000;font-stretch:62%;font-weight:800;font-size:15px;letter-spacing:.12em;text-transform:uppercase;transform:skewX(6deg) rotate(-3deg)}
.p5-notice h2{margin:16px 0 0;font-stretch:125%;font-weight:900;font-size:clamp(34px,3.6vw,52px);line-height:.88;letter-spacing:-.04em;text-transform:uppercase}
.p5-notice p{margin:14px 0 0;font-size:16px;line-height:1.5;max-width:42ch}
.p5-notice .row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px}
.p5-notice .days{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#9A9A9A}
.p5-notice .days b{display:block;font-family:Archivo,sans-serif;font-stretch:125%;font-weight:900;font-size:44px;line-height:.9;letter-spacing:-.04em;color:#FF80B5}
.p5-notice .mk-date{position:absolute;right:6px;top:-78px;width:clamp(150px,13vw,210px);height:auto;rotate:-8deg;pointer-events:none;filter:drop-shadow(3px 3px 0 #000)}
.p5.mk{z-index:4}
.p5 .mk-ring{position:absolute;left:50%;top:47%;width:150%;height:168%;max-width:none;translate:-50% -50%;object-fit:fill;pointer-events:none;z-index:-1;filter:drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000)}
.p5 .mk-arr{position:absolute;width:40%;height:auto;max-width:none;pointer-events:none;z-index:6;filter:drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000)}
.p5 .mk-arr.a1{width:50%;right:96%;top:-30%;rotate:30deg}
.p5 .mk-arr.a2{width:42%;left:4%;bottom:-40%;rotate:-52deg}
@media (max-width:900px){.p5 .mk-arr{display:none}.p5 .mk-ring{width:124%;height:140%}}
.p5-btn{display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 24px;background:#FF80B5;color:#000;font-stretch:62%;font-weight:800;font-size:20px;letter-spacing:.08em;text-transform:uppercase;transform:skewX(-10deg);box-shadow:5px 5px 0 #F9F9F9;transition:translate .12s ease,box-shadow .12s ease}
.p5-btn>*{display:inline-block;transform:skewX(10deg)}.p5-btn:hover{translate:-3px -3px;box-shadow:8px 8px 0 #F9F9F9;color:#000}.p5-btn:active{translate:0 0;box-shadow:0 0 0 #F9F9F9}
.p5-btn.ghost{background:#000;color:#F9F9F9;border:3px solid #F9F9F9;box-shadow:5px 5px 0 #FF80B5}.p5-btn.ghost:hover{color:#F9F9F9;box-shadow:8px 8px 0 #FF80B5}
.p5{position:relative;display:block;min-width:0;rotate:var(--rot);translate:0 var(--lift);transition:rotate .25s ease,translate .25s ease;z-index:1}
.p5 .cut{position:relative;display:block;overflow:hidden;clip-path:var(--cut);background:#141414}
.p5 .cut img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transform-origin:var(--pos,50% 50%);scale:var(--zoom,1);transition:scale .6s cubic-bezier(.2,.7,.2,1)}
.p5 .cut .alt{position:absolute;inset:0;opacity:0;transition:opacity .25s ease}
.p5 .cut-bg{position:absolute;inset:-5px;background:#F9F9F9;clip-path:var(--cut);transition:background-color .2s ease}   /* follows the photo's own cut, 5px all round */
.p5:hover{rotate:0deg;translate:0 calc(var(--lift) - 10px);z-index:5}.p5:hover .cut-bg{background:#FF80B5}.p5:hover .cut img:not(.alt){scale:calc(var(--zoom,1) * 1.04)}.p5:hover .cut .alt{opacity:1}
.p5.out .cut img{filter:grayscale(1);opacity:.5}
.p5-name{position:absolute;left:-12px;bottom:26px;display:inline-block;max-width:92%;padding:9px 18px 8px 16px;background:#000;color:#F9F9F9;border:3px solid #F9F9F9;transform:skewX(-14deg) rotate(-2deg);box-shadow:5px 5px 0 #FF80B5;transition:background-color .15s ease,color .15s ease}
.p5-name>span{display:inline-block;transform:skewX(14deg);font-stretch:62%;font-weight:800;font-size:clamp(17px,1.5vw,23px);line-height:1.05;letter-spacing:.06em;text-transform:uppercase}
.p5:hover .p5-name{background:#F9F9F9;color:#000}
.p5-price{position:absolute;right:-10px;top:-12px;display:inline-flex;align-items:center;height:42px;padding:0 16px;background:#FF80B5;color:#000;transform:rotate(7deg) skewX(-10deg);font-stretch:62%;font-weight:800;font-size:24px;letter-spacing:.04em;box-shadow:4px 4px 0 #000;z-index:2}
.p5-flag{position:absolute;left:-8px;top:16px;padding:7px 16px;background:#F9F9F9;color:#000;border:3px solid #000;transform:rotate(-6deg) skewX(-10deg);font-stretch:62%;font-weight:800;font-size:17px;letter-spacing:.12em;text-transform:uppercase;box-shadow:4px 4px 0 #FF80B5;z-index:2}
.p5.out .p5-flag{background:#000;color:#F9F9F9;border:2px solid #F9F9F9;font-size:18px;font-family:Archivo,sans-serif;font-stretch:62%;font-weight:800;left:50%;top:48%;translate:-50% -50%;transform:rotate(-14deg);padding:6px 14px}
.p5-banner{position:relative;z-index:3;align-self:center;justify-self:start;rotate:var(--rot);display:flex;flex-direction:column;gap:4px;padding:14px 34px 12px 26px;background:#FF80B5;color:#000;transform:skewX(-14deg);box-shadow:8px 8px 0 #F9F9F9;margin:24px 0}
.p5-banner.white{background:#F9F9F9;box-shadow:8px 8px 0 #FF80B5}
.p5-banner>*{display:block;transform:skewX(14deg)}
.p5-banner span{font-stretch:125%;font-weight:900;font-size:clamp(40px,5vw,72px);line-height:.82;letter-spacing:-.04em;text-transform:uppercase}
.p5-banner em{font-style:normal;font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
.p5-note{display:flex;align-items:center;gap:28px;margin-top:30px;padding:22px 28px;background:#000;border:3px solid #F9F9F9;transform:skewX(-6deg)}
.p5-note>*{transform:skewX(6deg)}.p5-note img{width:110px;height:auto;flex:none}.p5-note p{margin:0;font-size:17px;line-height:1.5;max-width:60ch}
.p5-note a{text-decoration:underline;text-decoration-color:#FF80B5;text-decoration-thickness:3px;text-underline-offset:4px}
@keyframes rtl-aslap{from{opacity:0;scale:1.6;rotate:-18deg}60%{opacity:1}to{opacity:1;scale:1;rotate:var(--rot,0deg)}}
.a-slap{animation:rtl-aslap .7s cubic-bezier(.2,.9,.2,1) var(--delay,.15s) both}
@keyframes rtl-up2{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
.a-in{animation:rtl-up2 .6s cubic-bezier(.2,.7,.2,1) var(--delay,.2s) both}
@supports (animation-timeline: view()){.p5.s-slap{animation:rtl-slap linear both;animation-timeline:view(0px 120px);animation-range:entry 0% entry 70%}}
/* product + cart share the language */
.p5-h1{margin:0;font-stretch:125%;font-weight:900;font-size:clamp(34px,3.5vw,54px);line-height:.9;letter-spacing:-.04em;text-transform:uppercase}
.p5-h1 span{display:inline-block;padding:.04em .14em 0;background:#F9F9F9;color:#000;transform:skewX(-8deg) rotate(-1.5deg);box-shadow:6px 6px 0 #FF80B5}
.p5-bigprice{display:inline-flex;align-items:center;height:52px;padding:0 18px;background:#FF80B5;color:#000;transform:rotate(-3deg) skewX(-10deg);font-stretch:62%;font-weight:800;font-size:30px;letter-spacing:.04em;box-shadow:4px 4px 0 #F9F9F9}
.p5-bigprice>*{display:inline-block;transform:skewX(10deg)}
.p5-sizes{display:flex;flex-wrap:wrap;gap:10px}
.p5-size{display:inline-flex;align-items:center;justify-content:center;min-width:54px;height:46px;padding:0 14px;background:#000;color:#F9F9F9;border:3px solid #F9F9F9;transform:skewX(-14deg);font-stretch:62%;font-weight:800;font-size:18px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:translate .12s ease,background-color .12s ease,color .12s ease}
.p5-size>span{display:inline-block;transform:skewX(14deg)}
.p5-size.on{background:#FF80B5;border-color:#FF80B5;color:#000;translate:3px -3px}.p5-size:not(.off):hover{background:#F9F9F9;color:#000;translate:3px -3px}
.p5-size.off{color:#4A4A4A;border-color:#2B2B2B;text-decoration:line-through;cursor:not-allowed}
.p5-qty{display:inline-flex;border:3px solid #F9F9F9;height:46px;transform:skewX(-14deg)}.p5-qty>*{display:inline-flex;align-items:center;justify-content:center;width:46px;font-stretch:62%;font-weight:800;font-size:20px}.p5-qty>*>span{display:inline-block;transform:skewX(14deg)}.p5-qty>span{border-left:3px solid #F9F9F9;border-right:3px solid #F9F9F9}
.p5-panel{position:relative;box-sizing:border-box;padding:22px 26px;background:#000;border:3px solid #F9F9F9;transform:skewX(-4deg)}
.p5-panel>*{transform:skewX(4deg)}
.p5-panel h3{margin:0 0 12px;display:inline-block;padding:4px 10px;background:#F9F9F9;color:#000;font-stretch:62%;font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase;transform:skewX(4deg) rotate(-2deg)}
.p5-spec{display:grid;grid-template-columns:auto 1fr;gap:0 18px}.p5-spec>span{padding:9px 0;border-top:1px solid #2B2B2B;font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:.04em}
.p5-spec>span:nth-child(odd){color:#9A9A9A}
.p5-list{margin:0;padding:0;list-style:none;font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:13px;line-height:1.5}.p5-list li{padding:8px 0;border-top:1px solid #2B2B2B}
.p5-tbl{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:13px}.p5-tbl th{text-align:left;font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9A9A9A;padding:0 10px 8px 0;border-bottom:1px solid #2B2B2B}.p5-tbl td{padding:9px 10px 9px 0;border-bottom:1px solid #2B2B2B}.p5-tbl .num{text-align:right}
.thumb{position:relative;display:block;clip-path:var(--cut);cursor:pointer}.thumb img{position:relative;z-index:1;display:block;width:100%;aspect-ratio:1;object-fit:cover;opacity:.55;transition:opacity .2s ease}.thumb.on img,.thumb:hover img{opacity:1}
.thumb-bg{position:absolute;inset:-3px;background:#F9F9F9;clip-path:var(--cut)}.thumb.on .thumb-bg{background:#FF80B5}
.p5-line{display:grid;grid-template-columns:110px 1fr auto auto auto;gap:20px;align-items:center;padding:18px 0;border-top:1px solid #2B2B2B}
.p5-line .cut{clip-path:var(--cut)}
.p5-inp{box-sizing:border-box;width:100%;height:48px;padding:0 14px;border:3px solid #F9F9F9;background:#000;color:#F9F9F9;font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:14px;transform:skewX(-6deg)}
.p5-inp::placeholder{color:#4A4A4A}
.p5-field{display:block}.p5-field>span{display:block;margin-bottom:6px;font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9A9A9A}
@media (max-width:900px){.p5-grid>*{grid-column:1 / span 12!important;translate:0 0!important}.p5-title{padding-top:0}.p5-menu{position:static}.p5-banner{margin:8px 0}.p5-line{grid-template-columns:90px 1fr;gap:12px}.pd{flex-direction:column!important}}
.m-cart{display:none}@media (max-width:700px){.m-cart:not([hidden]){position:fixed;right:14px;bottom:16px;z-index:40;display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 16px;background:#FF80B5;color:#000;border:3px solid #000;box-shadow:4px 4px 0 #F9F9F9;transform:rotate(-3deg);font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-weight:700;font-size:18px;text-decoration:none}.m-cart:active{transform:rotate(-3deg) translate(2px,2px);box-shadow:2px 2px 0 #F9F9F9}}
/* phones: straight to the products. The long intro and the vinyl blurb are for desktop; on a phone the first screen shows the menu, the title, the vinyl button and the start of the catalogue */
@media (max-width:700px){.p5-menu{flex-wrap:nowrap;gap:8px;margin-top:16px;overflow-x:auto;scrollbar-width:none;padding-bottom:10px}.p5-menu::-webkit-scrollbar{display:none}.p5-menu a{flex:0 0 auto;padding:7px 14px 7px 12px;font-size:15px;border-width:2px}.p5-menu a i{font-size:11px}.p5-eyebrow,.p5-lead{display:none}.p5-title h1{font-size:clamp(30px,9.4vw,40px)}.p5-notice{padding:16px 18px 18px;margin-top:8px;box-shadow:7px 7px 0 #FF80B5}.p5-notice>p:not(.pre-note),.p5-notice .days{display:none}.p5-notice h2{margin-top:10px;font-size:clamp(26px,8vw,34px)}.p5-notice .row{margin-top:14px}.p5-notice .k{font-size:13px}.p5-notice .mk-date{top:-40px;width:96px}.p5-banner{padding:8px 20px 7px 14px;margin:0;box-shadow:5px 5px 0 #F9F9F9}.p5-banner span{font-size:clamp(24px,7.4vw,32px)}.p5-banner em{font-size:10px}.p5-notice,#drop,.p5-ticker.mid{display:none}.p5-title h1{font-size:clamp(26px,8.2vw,34px)}.p5-monly{display:block!important;margin-top:18px}.p5-monly .lead{display:inline;margin:0;padding:3px 6px;background:#000;-webkit-box-decoration-break:clone;box-decoration-break:clone;font-size:14px;line-height:1.75;color:#F9F9F9}.p5-monly .pre-note{display:block!important;width:fit-content}.p5-monly .pre-note{font-size:10.5px!important;margin-top:6px!important}.p5-grid{gap:30px 12px;padding-top:24px}.p5-grid>a.p5{grid-column:span 6!important}.p5 .mk-ring,.p5 .mk-arr{display:none}.p5-name{left:-4px!important;bottom:8px!important;max-width:96%;padding:4px 8px 3px 7px;border-width:2px;box-shadow:3px 3px 0 #FF80B5}.p5-name>span{font-size:11.5px;letter-spacing:.04em}.p5-price{right:-4px!important;top:-8px;height:26px;padding:0 8px;font-size:15px;box-shadow:3px 3px 0 #000}.p5-flag{scale:.72;transform-origin:left top}}
.p5-monly{display:none}
@media (max-width:540px){.p5-grid{gap:34px 12px}.p5-name{left:-6px;bottom:18px}.p5-price{right:-6px}.p5-title h1{font-size:clamp(34px,11.6vw,46px)}.p5-notice .mk-date{right:auto;left:46%;top:-52px;width:112px}.p5-note{gap:14px;padding:16px 18px;margin-inline:10px}.p5-note img{width:56px}.p5-note p{font-size:15px;min-width:0}.p5-panel{transform:skewX(-1.5deg)}.p5-panel h3{transform:skewX(1.5deg) rotate(-2deg)}}
/* ---- admin ---- */
.ad-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:12px clamp(16px,3.4vw,48px);background:#000;border-bottom:1px solid #2B2B2B}
.ad-nav{display:flex;flex-wrap:wrap;gap:6px}.ad-nav a{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1px solid #2B2B2B;font-stretch:62%;font-weight:800;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.ad-nav a i{font-style:normal;font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:11px;color:#FF80B5}.ad-nav a.on,.ad-nav a:hover{background:#F9F9F9;color:#000;border-color:#F9F9F9}.ad-nav a.on i{color:#000}
.kpi{border:1px solid #2B2B2B;padding:18px 20px 20px}
.tbl{width:100%;border-collapse:collapse;font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:.03em}
.tbl th{text-align:left;font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9A9A9A;padding:0 12px 10px 0;border-bottom:1px solid #2B2B2B}
.tbl td{padding:12px 12px 12px 0;border-bottom:1px solid #2B2B2B;vertical-align:middle}.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.chip{display:inline-flex;align-items:center;height:22px;padding:0 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid currentColor;white-space:nowrap}
.chip.paid{color:#FF80B5}.chip.prep{color:#F9F9F9}.chip.ship{color:#000;background:#FF80B5;border-color:#FF80B5}.chip.done{color:#9A9A9A}.chip.pf{color:#000;background:#F9F9F9;border-color:#F9F9F9}.chip.warn{color:#000;background:#F9F9F9;border-color:#F9F9F9}
.lowq{color:#FF80B5}.zeroq{color:#000;background:#FF80B5;padding:0 6px}
.bar{display:flex;align-items:flex-end;gap:10px;height:160px;border-bottom:1px solid #2B2B2B}
.bar>div{flex:1 1 0;background:#F9F9F9;position:relative}.bar>div.now{background:#FF80B5}
.bar>div>span{position:absolute;left:0;right:0;bottom:100%;margin-bottom:6px;text-align:center;font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:11px;color:#9A9A9A}
.stock-in{box-sizing:border-box;width:52px;height:32px;padding:0 6px;border:1px solid #2B2B2B;background:#000;color:#F9F9F9;font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:13px;text-align:right}
.abtn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:2px solid #F9F9F9;font-stretch:62%;font-weight:800;font-size:15px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.abtn.pink{background:#FF80B5;border-color:#FF80B5;color:#000}.abtn.small{height:30px;padding:0 10px;font-size:13px;border-width:1px;border-color:#2B2B2B}
.alert{display:flex;gap:14px;align-items:baseline;padding:12px 16px;border:1px solid #2B2B2B;border-left:4px solid #FF80B5;font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:13px;line-height:1.5}
.alert b{font-weight:400;color:#FF80B5;white-space:nowrap}
.ad-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin:56px 0 18px;padding-top:18px;border-top:1px solid #2B2B2B}
.ad-h h2{margin:0;font-stretch:125%;font-weight:900;font-size:clamp(32px,3.6vw,48px);line-height:.9;letter-spacing:-.03em;text-transform:uppercase}
@media (max-width:700px){.admin-cols{grid-template-columns:1fr!important}}