/* Odd Goon Resort – rebuild of the Cargo layout. Sizes in rem follow Cargo: 1rem = 0.9vw (desktop), 1.232vw (mobile). */
:root{--text:rgba(0,0,0,.85);--active:#ff0000;--bg:#fff;--pad:3rem;--pad-k:1}
html{font-size:0.9vw;-webkit-text-size-adjust:100%}
@media (max-width:767px){html{font-size:1.232vw}:root{--pad-k:.95}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Times','Times New Roman',serif}
a{color:var(--text);text-decoration:none}
a:active{opacity:.7}
.page a.active{color:var(--active)}
img{display:block;max-width:100%;height:auto}
.hero{height:41.5rem;width:auto;margin:0 auto;display:inline-block;vertical-align:top}
.page{position:relative;min-height:100vh;min-height:100dvh}
.page-content{padding:calc(var(--pad) * var(--pad-k));text-align:left}
.bodycopy{display:block;font-size:1.2rem;line-height:1.2;font-weight:400}
@media (max-width:767px){.bodycopy{font-size:3.5rem}}
h1{font-family:inherit;font-weight:400;margin:0;font-size:3.2rem;line-height:1;color:var(--text);transform:scaleY(3)}
h2{font-family:inherit;font-weight:400;margin:0;font-size:2rem;line-height:1.1;color:var(--text);transform:scaleY(2)}
.caption{display:block;font-size:1.1rem;line-height:1.2;margin-top:.5em;color:var(--text)}
.caption a{color:var(--text)}
.caption .meta{opacity:1}
/* header & footer (pinned, fixed overlay) */
.pin{position:fixed;left:0;right:0;z-index:20;pointer-events:none;min-height:0}
.pin *{pointer-events:auto}
.pin-top{top:0}
.pin-top .page-content{padding-top:calc(4.6rem * var(--pad-k))}
.pin-bottom{bottom:0}
.pin-bottom .page-content{padding-bottom:calc(1.3rem * var(--pad-k))}
.cols{display:grid;grid-template-columns:repeat(var(--n,12),minmax(0,1fr));column-gap:var(--g,1rem);align-items:start}
.cols > .unit{min-width:0}
.hdr{--n:12;--g:1.7rem}
.hdr h1{background:#fff;display:inline-block}
.hdr h2{background:#fff;display:inline-block;border:.3rem solid rgba(255,255,255,.85)}
.hdr .s6{grid-column:span 6}.hdr .s2{grid-column:span 2;text-align:right}
@media (max-width:767px){.hdr{--g:0rem}}
.ftr{--n:3;--g:2rem}
.ftr a,.ftr span{background:#fff}
.ftr .c{text-align:center}.ftr .r{text-align:right}
@media (max-width:767px){.ftr{--g:1.5rem}}
.ftr .sep{background:none}
.newsletter{display:inline-flex;gap:.4em;background:#fff}
.newsletter input{font:inherit;border:0;border-bottom:1px solid var(--text);width:9em;background:#fff;padding:0}
.newsletter button{font:inherit;border:0;background:none;padding:0;cursor:pointer;color:var(--text)}
/* language switcher */
.langs{position:fixed;top:.9rem;right:calc(3rem * var(--pad-k));z-index:30;display:flex;gap:.45rem;line-height:0}
.langs a{display:block;opacity:.55;transition:opacity .15s}
.langs a:hover,.langs a.on{opacity:1}
.langs svg{width:1.6rem;height:1.07rem;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
@media (max-width:767px){.langs{top:.6rem;gap:.8rem}.langs svg{width:3rem;height:2rem}}
/* media */
.media{display:block;position:relative}
.media img{width:100%;height:auto}
.zoomable img{cursor:zoom-in}
.c-center{text-align:center}
/* gallery grid */
.ggrid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));column-gap:var(--cg,2rem);row-gap:var(--rg,2rem);align-items:start}
.ggrid.v-bottom{align-items:end}
@media (max-width:767px){.ggrid{grid-template-columns:repeat(var(--mcols,var(--cols,3)),minmax(0,1fr));column-gap:var(--mcg,var(--cg,2rem));row-gap:var(--mrg,var(--rg,2rem))}}
/* gallery justify */
.gjust{display:flex;flex-direction:column;gap:1rem}
.gjust .row{display:flex;gap:1rem;align-items:flex-start}
.gjust .row > .media{flex:var(--ar) 1 0;min-width:0}
/* 4-column release rows */
.relrow{--n:4;--g:1rem}
.relrow .media{width:var(--scale,100%)}
@media (max-width:767px){.relrow{grid-template-columns:1fr;row-gap:4.2rem}.relrow .empty{display:none}}
.subnav{display:block;text-align:center;font-size:1.37em}
.subnav-artists{margin:.35em 0 .5em;line-height:1.35}
.subnav-artists a{display:inline-block;margin:0 .35em;white-space:nowrap}
@media (max-width:767px){.subnav-artists{font-size:.8em;margin:.5em 0 .7em}.subnav-artists a{margin:0 .3em}}
.video{position:relative;width:100%;aspect-ratio:var(--ar,16/9);background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* flying objects: exact Cargo "flying-object" (fixed overlay above everything, not clickable) */
.flying{position:fixed;inset:0;z-index:5000;overflow:hidden;pointer-events:none!important;user-select:none}
.flying .flier{position:absolute;top:0;left:0;z-index:9995;pointer-events:none!important;transform:translateX(-100%) translateY(-100%);animation-timing-function:linear}
.flying .spinner{display:flex;align-items:center;justify-content:center;position:relative;width:var(--size,22vmax);height:var(--size,22vmax)}
.flying .spinner img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
@keyframes spin{0%{transform:rotateZ(0deg)}100%{transform:rotateZ(3600deg)}}
/* draggable hero (Cargo "drag") */
.drag{cursor:grab;pointer-events:auto;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;-webkit-user-drag:none}
.drag.dragging{cursor:grabbing}
/* quick view (image zoom) */
.qv{position:fixed;inset:0;background:#fff;z-index:100;display:none;align-items:center;justify-content:center;padding:3rem;cursor:zoom-out}
.qv.on{display:flex}
.qv img{max-width:100%;max-height:100%;object-fit:contain}
@media (max-width:767px){.qv{padding:10px}}
/* artists */
.artist-bio{font-size:1.2rem;text-align:center;margin-top:.6em}
.artist-links{font-size:1.1rem;text-align:center;margin-top:.3em}
.artist-links a{margin:0 .4em}
/* clothing shop caption */
.buyline{display:flex;justify-content:space-between;gap:.5em}
.buyline a{text-decoration:underline}
/* instagram */
.insta{margin-top:max(12rem,calc(100vh - 40rem));text-align:center}
@media (max-width:767px){.insta{margin-top:calc(100vh - 60rem)}}
.insta .profiles a{margin:0 .6em}
.insta .posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:2rem;align-items:start}
@media (max-width:767px){.insta .posts{grid-template-columns:1fr}}
.insta blockquote.instagram-media{margin:0 auto!important;min-width:0!important;width:100%!important}
/* shop */
.shop-list{max-width:100%}
.shop-item{margin-bottom:6rem}
.shop-manual{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.shop-manual h3{font-weight:400;font-size:2.3rem;margin:0 0 .4em}
.shop-manual .btn{display:inline-block;background:#c43c3c;color:#fff;padding:.7em 3em;font-weight:700;margin-top:1em}
@media (max-width:767px){.shop-manual{grid-template-columns:1fr}}
.thanks{margin-top:2rem;margin-bottom:6rem}
.footer-space{height:5rem}
/* artist page */
.artist-page{text-align:center}
.artist-name{font-size:2.4em;line-height:1.1}
.artist-photo{width:30rem;max-width:100%;margin:1.2rem auto 0}
.artist-photo img{width:100%}
.artist-h{text-align:center;font-size:1.37em;margin:4rem 0 1.6rem}
@media (max-width:767px){.artist-photo{width:60rem}.artist-h{margin:9rem 0 3rem}}
.artist-page .artist-links{font-size:.95em;margin-top:.6em}
.artist-page .artist-bio{font-size:1em;max-width:40em;margin:.8em auto 0}
/* newsletter sign-up (homepage) – Shopify customer form */
.nl-box{position:relative;z-index:10;margin:2rem auto 0;text-align:center;max-width:40rem}
.nl-row{display:flex;justify-content:center;align-items:stretch;gap:0}
.nl-box input[type=email]{font:inherit;color:var(--text);background:#fff;border:1px solid var(--text);border-right:0;border-radius:0;padding:.35em .6em;flex:1 1 auto;min-width:0;-webkit-appearance:none;appearance:none;outline:none}
.nl-box input[type=email]::placeholder{color:rgba(0,0,0,.4)}
.nl-box input[type=email]:focus{box-shadow:inset 0 0 0 1px var(--text)}
.nl-box.bad input[type=email]{border-color:var(--active);box-shadow:inset 0 0 0 1px var(--active)}
.nl-box button{font:inherit;letter-spacing:.04em;color:#fff;background:var(--text);border:1px solid var(--text);border-radius:0;padding:.35em .9em;cursor:pointer;white-space:nowrap;-webkit-appearance:none;appearance:none}
.nl-box button:hover{background:var(--active);border-color:var(--active)}
.nl-msg{color:var(--active);font-size:.85em;margin-top:.5em}
.nl-thanks{font-size:.9em;margin-top:.5em}
.nl-box.done .nl-row{display:none}
.nl-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.nl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:767px){.nl-box{margin-top:9rem;max-width:none;padding:0 2rem}.nl-row{flex-direction:column;gap:2rem}.nl-box input[type=email]{border-right:1px solid var(--text);padding:.45em .5em;font-size:max(16px,1em)}.nl-box button{padding:.45em .5em}}
/* [tracks] album/EP: tracklijst klapt uit onder de hoes. Muis = hover, touch = eerste tik (paneel onder de rij). Singles blijven zoals ze zijn. */
.tracks{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .5s cubic-bezier(.22,.8,.24,1),opacity .35s ease,visibility 0s linear .5s}
.tracks>ol{min-height:0;overflow:hidden;margin:0;padding:0;list-style:none;font-size:1.1rem;line-height:1.3}
.tracks ol{counter-reset:trk}
.tracks li{counter-increment:trk;display:flex;align-items:baseline;gap:.45em;padding:.12em 0;opacity:0;transform:translateY(-.35em);transition:opacity .25s ease,transform .3s ease}
.tracks li:first-child{margin-top:.7em}
.tracks li:last-child{margin-bottom:.3em}
.tracks li::before{content:counter(trk);min-width:1.3em;opacity:.45;font-variant-numeric:tabular-nums}
.tracks li>a,.tracks li>span{flex:1;display:flex;align-items:baseline;min-width:0}
.tracks .t-n{flex:1;min-width:0;overflow-wrap:anywhere}
.tracks .t-ft{opacity:.55;font-size:.9em;white-space:nowrap}
.tracks .t-d{flex:none;padding-left:.6em;opacity:.45;font-variant-numeric:tabular-nums}
.tracks a{transition:color .15s}
.tracks a:hover,.tracks a:focus-visible{color:var(--active);outline:none}
.tracks a:hover .t-ft,.tracks a:hover .t-d{opacity:.8}
.tracks.on{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .5s cubic-bezier(.22,.8,.24,1),opacity .35s ease,visibility 0s}
.tracks.on li{opacity:1;transform:none;transition-delay:calc(.08s + var(--i,0) * .03s)}
@media (hover:hover) and (pointer:fine){
 .has-tracks:hover>.tracks,.has-tracks:focus-within>.tracks{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .5s cubic-bezier(.22,.8,.24,1) .12s,opacity .35s ease .12s,visibility 0s .12s}
 .has-tracks:hover>.tracks li,.has-tracks:focus-within>.tracks li{opacity:1;transform:none;transition-delay:calc(.2s + var(--i,0) * .03s)}
}
/* touch: paneel over de volle breedte onder de rij van het aangetikte album */
.tracks-panel{grid-column:1/-1;width:100%;min-width:0}
.tracks-panel .tracks>ol{font-size:3rem;line-height:1.35}
.tracks-panel .tracks li{padding:.32em 0;border-bottom:1px solid rgba(0,0,0,.08)}
.tracks-panel .tracks li:first-child{margin-top:.4em}
.has-tracks.open>a img{opacity:.8;transition:opacity .2s}
@media (min-width:768px){.tracks-panel .tracks>ol{font-size:1.4rem}}
@media (prefers-reduced-motion:reduce){.tracks,.tracks li{transition:none!important}}
.tracks-panel .tracks li.tp-h{counter-increment:none;border:0;padding:0;margin:.9em 0 .2em;font-size:.8em;opacity:.55;display:block}
.tracks-panel .tracks li.tp-h::before{content:none}