/* Retrace The Lines — home. Layout lives inline in the markup; this file holds fonts, base rules, motion and hover states. */
/* ---- 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}
.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}
/* ---- 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}
/* hero: chip, thumbnail + title and the two buttons sit centred */
.m-cta{align-items:center!important}
.m-cta>div{justify-content:center}
.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}}