@font-face{font-family:"Lexend Deca";src:url("assets/fonts/LexendDeca.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{--bg:#0b0c10;--bg2:#14161d;--ivory:#efe8d6;--gold:#ffd36b;--ink:#0b0c10;--mut:rgba(239,232,214,.58);--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{font-family:"Lexend Deca",system-ui,sans-serif;font-weight:300;color:var(--ivory);background:var(--bg);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
.veil{position:fixed;inset:0;background:#000;z-index:100;pointer-events:none;transition:opacity 1.6s var(--ease)}
.veil.off{opacity:0}

/* header */
.top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:26px 36px;color:var(--ivory)}
.menu-btn,.logo{transition:color .3s}
.menu-btn.dark{color:var(--ink)}
.logo img{height:30px;width:auto;filter:drop-shadow(0 1px 8px rgba(0,0,0,.25))}
.menu-btn{background:none;border:0;color:inherit;font:inherit;font-size:16px;font-weight:600;letter-spacing:-.02em;cursor:pointer;display:flex;align-items:center;gap:12px}
.menu-btn i{width:22px;height:7px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;transition:transform .4s var(--ease)}
.menu-btn[aria-expanded=true] i{transform:scaleY(.2)}
.menu{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;justify-content:center;padding:0 8vw;gap:6px;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.menu.open{opacity:1;visibility:visible}
.menu>a{font-size:clamp(38px,7vw,96px);line-height:1.02;font-weight:700;letter-spacing:-.06em;transform:translateY(24px);opacity:0;transition:transform .7s var(--ease),opacity .7s,color .3s}
.menu.open>a{transform:none;opacity:1}
.menu.open>a:nth-child(2){transition-delay:.05s}.menu.open>a:nth-child(3){transition-delay:.1s}.menu.open>a:nth-child(4){transition-delay:.15s}.menu.open>a:nth-child(5){transition-delay:.2s}
.menu>a:hover{color:var(--gold)}
.menu-social{display:flex;gap:28px;margin-top:40px;font-size:14px;color:var(--mut)}
.menu-social a:hover{color:var(--ivory)}

/* hero */
.hero{display:grid;grid-template-columns:52fr 48fr;min-height:100vh;height:100svh}
.hero-film{position:relative;overflow:hidden;background:#000}
.hero-film video{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:push 24s linear infinite alternate}
@keyframes push{to{transform:scale(1.0)}}
.hero-film::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 45%)}
.hero-line{position:absolute;left:36px;bottom:36px;z-index:2;font-size:clamp(18px,1.8vw,26px);font-weight:600;letter-spacing:-.04em;color:var(--ivory);opacity:.9}
.hero-card{background:var(--ivory);color:var(--ink);padding:110px 56px 40px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.label{font-size:14px;font-weight:500;letter-spacing:-.01em;opacity:.65}
.hero-card h1{font-size:clamp(44px,5.6vw,92px);font-weight:700;line-height:.95;letter-spacing:-.06em;border-bottom:3px solid var(--ink);padding-bottom:20px;align-self:flex-start}
.cover{width:min(300px,36vh);aspect-ratio:1;overflow:hidden;align-self:center;box-shadow:0 30px 60px -20px rgba(0,0,0,.35)}
.cover img{width:100%;height:100%;object-fit:cover}
.note{font-size:14px;opacity:.7}
.hero-links{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;font:inherit;font-size:15px;font-weight:600;letter-spacing:-.01em;padding:14px 26px;background:var(--ink);color:var(--ivory);border:1px solid var(--ink);cursor:pointer;transition:background .3s,color .3s}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--ivory)}
.film .btn,.join .btn{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.film .btn:hover,.join .btn:hover{background:transparent;color:var(--ivory)}

/* statement */
.statement{padding:22vh 8vw;text-align:left}
.statement p{font-size:clamp(38px,7vw,116px);font-weight:700;line-height:.98;letter-spacing:-.06em;max-width:14em}
.statement .sub{font-size:clamp(16px,1.6vw,22px);font-weight:300;letter-spacing:0;line-height:1.7;margin-top:40px;color:var(--mut);max-width:30em;line-height:1.7}

/* shared */
.sec-head{padding:0 8vw;margin-bottom:6vh}
h2{font-size:clamp(60px,11vw,190px);font-weight:700;line-height:.9;letter-spacing:-.07em;margin-top:14px}
.body{font-size:17px;max-width:30em;margin:28px 0;color:var(--mut);line-height:1.8}
.dim{opacity:.45;font-size:14px}

/* music */
.music{padding:10vh 0}
.releases{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 3vw;padding:0 8vw}
.rel{cursor:pointer}
.rel:nth-child(3n+2){margin-top:8vh}
.rel:nth-child(3n){margin-top:3vh}
.art{aspect-ratio:1;overflow:hidden;background:var(--bg2)}
.art img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s;filter:saturate(.95)}
.rel:hover .art img{transform:scale(1.06);filter:saturate(1.15)}
.rel h3{font-weight:600;letter-spacing:-.035em;font-size:24px;margin-top:18px;line-height:1.25}
.rel h3 small{display:block;font-weight:300;letter-spacing:0;font-size:13px;color:var(--mut);margin-top:2px}
.rel span{font-size:13px;color:var(--mut)}
.more{padding:8vh 8vw 0;font-size:15px}
.more a{border-bottom:1px solid var(--mut);padding-bottom:3px}

/* drift */
.drift{position:relative;height:150vh;overflow:hidden}
.tile{position:absolute;overflow:hidden;background:var(--bg2);will-change:transform}
.tile video{width:100%;height:100%;object-fit:cover}
.t1{left:0;top:6%;width:22vw;aspect-ratio:3/4}
.t2{left:32vw;top:18%;width:42vw;aspect-ratio:16/10}
.t3{right:5vw;top:2%;width:20vw;aspect-ratio:4/5}
.t4{right:0;top:58%;width:30vw;aspect-ratio:3/2}

/* film / about */
.film,.about{display:grid;grid-template-columns:1fr 1fr;gap:6vw;padding:14vh 8vw;align-items:center}
.film-media,.about-media{aspect-ratio:4/5;overflow:hidden;background:var(--bg2)}
.film-media video,.about-media video{width:100%;height:100%;object-fit:cover}
.scores{padding:14vh 0 16vh}.scores .body{padding:0 8vw}

/* join */
.join{padding:18vh 8vw;background:var(--ivory);color:var(--ink)}
.join .label{opacity:.65}
.signup{display:flex;gap:14px;margin-top:48px;flex-wrap:wrap}
.signup input{flex:1;min-width:240px;max-width:460px;background:transparent;border:0;border-bottom:1px solid var(--ink);padding:14px 2px;font:inherit;font-size:18px;color:var(--ink);outline:none}
.join .btn{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
.join .btn:hover{background:transparent;color:var(--ink)}
.thanks{margin-top:24px;font-size:18px}

.foot-logo{width:100%;height:auto;padding:0 3vw;margin-bottom:40px;display:block}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;padding:12vh 36px 32px;font-size:13px;color:var(--mut)}
.foot-links{display:flex;gap:24px}.foot-links a:hover{color:var(--ivory)}

/* player */
.player{position:fixed;inset:0;z-index:80;background:rgba(5,6,8,.94);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.player.open{opacity:1;visibility:visible}
.frame{width:min(90vw,1100px);aspect-ratio:16/9}
.frame iframe{width:100%;height:100%;border:0}
.close{position:absolute;top:26px;right:36px;background:none;border:0;color:var(--ivory);font:inherit;font-size:16px;font-weight:600;letter-spacing:-.02em;cursor:pointer}

/* reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1.4s var(--ease),transform 1.4s var(--ease)}
.reveal.in{opacity:1;transform:none}
.rel,.sec-head,.film-text,.about-text,.join>*{opacity:0;transform:translateY(40px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.rel.in,.sec-head.in,.film-text.in,.about-text.in,.join>.in{opacity:1;transform:none}
.rel:nth-child(3n+2){transition-delay:.12s}.rel:nth-child(3n){transition-delay:.24s}

@media (max-width:860px){
  .top{padding:20px}
  .hero{grid-template-columns:1fr;grid-template-rows:55svh auto;height:auto}
  .hero-card{padding:40px 24px 32px}
  .hero-line{left:20px;bottom:20px}
  .releases{grid-template-columns:1fr 1fr;gap:36px 4vw}
  .rel:nth-child(n){margin-top:0}
  .film,.about{grid-template-columns:1fr;gap:40px}
  .drift{height:110vh}
  .t1{width:34vw}.t2{left:24vw;width:70vw}.t3{width:32vw}.t4{width:48vw}
  footer{flex-direction:column;gap:12px;padding:8vh 20px 28px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal,.rel,.sec-head,.film-text,.about-text,.join>*{opacity:1;transform:none}}

/* ===== v2: Olafur-style structure ===== */
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end}
.ulink{font-size:17px;font-weight:600;letter-spacing:-.02em;border-bottom:2px solid var(--ink);padding-bottom:4px;transition:opacity .3s}
.ulink:hover{opacity:.55}
.hero-card .note{font-size:15px;font-weight:600;letter-spacing:-.03em;opacity:1}
.collage{position:relative;padding:16vh 0 8vh}
.node{display:block;position:relative;margin-bottom:14vh}
.node h2{margin-top:10px}
.node .media{overflow:hidden;background:var(--bg2);will-change:transform}
.node .media video{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.node:hover .media video{transform:scale(1.06)}
.node:hover h2{transform:translateX(1.2vw)}
.node h2{transition:transform .8s var(--ease)}
.n-works{margin-left:6vw;width:42vw}.n-works .media{width:100%;aspect-ratio:4/5;margin-bottom:5vh}
.n-join{margin-left:56vw;width:34vw;margin-top:-34vh}.n-join .media{width:100%;aspect-ratio:3/2;margin-top:5vh}
.n-sheet{margin-left:22vw;width:50vw}.n-sheet .media{width:100%;aspect-ratio:16/9;margin-top:5vh}
.n-shop{margin-left:64vw;width:26vw;margin-top:-6vh}.n-shop .media{width:100%;aspect-ratio:4/5;margin-bottom:5vh}
.node{opacity:0;transform:translateY(50px);transition:opacity 1.3s var(--ease),transform 1.3s var(--ease)}
.node.in{opacity:1;transform:none}
/* inner pages */
body:not([data-page=home]) #main{padding:22vh 0 12vh;min-height:90vh}
.page-head{padding:0 8vw;margin-bottom:9vh}
.page-head h1{font-size:clamp(64px,13vw,230px);font-weight:700;line-height:.88;letter-spacing:-.075em;margin-top:14px}
.page-head .body{margin-top:36px}
.page-head,.row,.contact,.signup,.soon{opacity:0;transform:translateY(40px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.page-head.in,.row.in,.contact.in,.signup.in,.soon.in{opacity:1;transform:none}
.releases.wide{grid-template-columns:repeat(4,1fr)}
.art.land{aspect-ratio:16/9}
.art.land img{object-fit:cover}
.soon{padding:0 8vw;font-size:22px;color:var(--mut)}
.soon .btn{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.soon .btn:hover{background:transparent;color:var(--ivory)}
.list{padding:0 8vw}
.row{display:grid;grid-template-columns:2fr 1fr auto;gap:24px;padding:26px 0;border-bottom:1px solid rgba(239,232,214,.2);font-size:22px;align-items:baseline}
.row b{font-weight:600;letter-spacing:-.03em}.row em{font-style:normal;border-bottom:1px solid currentColor}
.contact{padding:0 8vw}
.mail{font-size:clamp(28px,5vw,80px);font-weight:700;letter-spacing:-.06em;border-bottom:3px solid var(--ivory);display:inline-block;line-height:1.1}
.menu-social.big{font-size:20px;margin-top:48px}
body[data-page=mailing-list] .signup{padding:0 8vw}
body[data-page=mailing-list] .signup input{color:var(--ivory);border-bottom-color:var(--ivory)}
body[data-page=mailing-list] .signup .btn{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
body[data-page=mailing-list] .thanks{padding:0 8vw}
@media (max-width:860px){
  .collage{padding-top:10vh}
  .n-works,.n-join,.n-sheet,.n-shop{width:84vw;margin-left:8vw;margin-top:0}
  .releases.wide{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:1fr auto;font-size:18px}.row span{display:none}
}

/* ===== v3 ===== */
.page-head{display:grid;grid-template-columns:1fr auto;gap:5vw;align-items:end}
.head-media{width:min(26vw,380px);aspect-ratio:4/5;overflow:hidden;background:var(--bg2)}
.head-media video{width:100%;height:100%;object-fit:cover}
.group{padding:0 8vw;margin:0 0 4vh;font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--mut)}
.releases.albums{grid-template-columns:repeat(2,1fr);margin-bottom:12vh}
.releases.albums .rel:nth-child(n){margin-top:0}
.releases.albums h3{font-size:36px}
.releases+.group{margin-top:2vh}
.rel{position:relative}
.playdot{position:absolute;left:18px;bottom:18px;width:54px;height:54px;border-radius:50%;background:rgba(11,12,16,.7);backdrop-filter:blur(6px);opacity:0;transform:scale(.8);transition:opacity .4s,transform .4s var(--ease)}
.playdot::after{content:"";position:absolute;left:21px;top:16px;border-left:16px solid var(--ivory);border-top:11px solid transparent;border-bottom:11px solid transparent}
.rel:hover .playdot{opacity:1;transform:none}
.frame.spot{aspect-ratio:auto;height:352px;width:min(92vw,680px)}
.frame.spot iframe{border-radius:14px}
.hero-card.simple{justify-content:space-between}
.hero-logo{width:min(100%,520px);height:auto;margin-top:6vh}
.hero-card .big{font-size:clamp(20px,2vw,30px);font-weight:600;letter-spacing:-.04em;line-height:1.2;max-width:12em}
.band{position:relative;height:100vh;overflow:hidden;background:#000}
.band video{width:100%;height:100%;object-fit:cover}
.band p{position:absolute;left:8vw;bottom:10vh;max-width:11em;font-size:clamp(40px,7vw,120px);font-weight:700;line-height:.95;letter-spacing:-.065em;text-shadow:0 4px 40px rgba(0,0,0,.35)}
@media (max-width:860px){
  .page-head{grid-template-columns:1fr}.head-media{width:60vw}
  .releases.albums{grid-template-columns:1fr}
  .band{height:80svh}
}

.soon-row em{border-bottom:0;opacity:.5}

/* heard on */
.heard{padding:14vh 8vw 4vh}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:5vh 5vw;margin-top:5vh}
.logo-item{display:flex;align-items:center;height:44px;opacity:.9}
.logo-item img{height:100%;width:auto;max-width:180px;object-fit:contain;filter:brightness(0) invert(1)}
.logo-item.txt{font-size:clamp(22px,2.6vw,38px);font-weight:700;letter-spacing:-.05em;color:var(--ivory)}

.logo-item.keep img{filter:none}

/* film & media */
.logos.pad{padding:0 8vw 6vh;margin-top:0}
.posters{display:grid;grid-template-columns:repeat(5,1fr);gap:48px 2.4vw;padding:0 8vw;margin-bottom:12vh}
.poster{opacity:0;transform:translateY(40px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.poster.in{opacity:1;transform:none}
.pimg{aspect-ratio:2/3;overflow:hidden;background:var(--bg2);display:grid;place-items:center}
.pimg img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.poster:hover .pimg img{transform:scale(1.05)}
.pimg span{padding:16px;font-weight:700;letter-spacing:-.04em;font-size:22px;text-align:center}
.poster h3{font-weight:600;letter-spacing:-.03em;font-size:20px;margin-top:14px;line-height:1.2}
.poster>span{font-size:13px;color:var(--mut)}
@media (max-width:860px){.posters{grid-template-columns:repeat(2,1fr)}}

.n-works{margin-left:6vw}.n-shop{margin-left:46vw;margin-top:-12vh}

/* about + contact form */
.about-body{padding:0 8vw;max-width:46em}
.contact-form{padding:0 8vw;display:grid;gap:26px;max-width:44em;margin-bottom:10vh}
.contact-form label{display:grid;gap:8px;font-size:14px;font-weight:500;color:var(--mut)}
.contact-form input,.contact-form select,.contact-form textarea{background:transparent;border:0;border-bottom:1px solid rgba(239,232,214,.4);color:var(--ivory);font:inherit;font-size:18px;padding:12px 2px;outline:none;border-radius:0}
.contact-form select option{background:var(--bg);color:var(--ivory)}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-bottom-color:var(--ivory)}
.contact-form textarea{resize:vertical}
.contact-form .btn{background:var(--ivory);color:var(--ink);border-color:var(--ivory);justify-self:start}
.contact-form .btn:hover{background:transparent;color:var(--ivory)}
.hp{position:absolute!important;left:-9999px;opacity:0}

/* works: every release the same small size */
.releases.uniform{grid-template-columns:repeat(6,1fr);gap:36px 1.6vw}
.releases.uniform .rel:nth-child(n){margin-top:0}
.releases.uniform .rel h3{font-size:15px;margin-top:12px;letter-spacing:-.02em}
.releases.uniform .rel h3 small{font-size:12px}
.releases.uniform .playdot{width:40px;height:40px;left:10px;bottom:10px}
.releases.uniform .playdot::after{left:16px;top:11px;border-left-width:12px;border-top-width:9px;border-bottom-width:9px}
@media (max-width:1100px){.releases.uniform{grid-template-columns:repeat(4,1fr)}}
@media (max-width:860px){.releases.uniform{grid-template-columns:repeat(2,1fr)}}

/* scores list is always visible (no scroll-reveal) */
.row,.soon{opacity:1!important;transform:none!important}

body[data-page=shop] .page-head{margin-bottom:5vh}
body[data-page=shop] #main{padding-top:16vh}