:root{
  --bg:#050505;
  --paper:#ededeb;
  --muted:#8e8e89;
  --line:#252525;
  --cyan:#70d8d8;
  --orange:#f27c28;
  --jp:"Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  --latin:"Helvetica Neue","Arial Narrow",Arial,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--paper);font-family:var(--jp);font-feature-settings:"palt" 1;line-height:1.65}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
::selection{background:var(--paper);color:#000}

.header{
  position:fixed;left:0;right:0;top:0;z-index:30;height:58px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(18px,3vw,46px);border-bottom:1px solid rgba(255,255,255,.12);
  background:rgba(5,5,5,.88);backdrop-filter:blur(8px)
}
.brand{display:flex;align-items:center}
.brand img{height:24px;width:auto;display:block}
.nav{display:flex;gap:24px;font:500 10px/1 var(--latin);letter-spacing:.12em}
.nav a{opacity:.66;transition:.2s}.nav a:hover{opacity:1}

.hero{position:relative;min-height:100svh;overflow:hidden;padding-top:58px;border-bottom:1px solid var(--line);isolation:isolate}
.hero-bg{position:absolute;inset:58px 0 0;z-index:-5;width:100%;height:calc(100% - 58px);object-fit:cover;object-position:center;filter:brightness(.50) saturate(.84)}
.hero::before{content:"";position:absolute;inset:58px 0 0;z-index:-4;background:linear-gradient(90deg,rgba(0,0,0,.96) 0%,rgba(0,0,0,.72) 33%,rgba(0,0,0,.16) 72%,rgba(0,0,0,.30) 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:-3;background:linear-gradient(0deg,#050505 0%,rgba(5,5,5,.78) 25%,transparent 100%)}
.gears{position:absolute;inset:58px 0 0;z-index:-2;width:100%;height:calc(100% - 58px);object-fit:cover;opacity:.13;pointer-events:none}
.hero-inner{position:relative;width:min(1540px,calc(100% - 60px));min-height:calc(100svh - 58px);margin:auto}
.hero-meta{position:absolute;left:0;top:52px;font:500 10px/1.5 var(--latin);letter-spacing:.18em;color:#bcbcb8}
.hero-copy{position:absolute;left:0;bottom:76px;z-index:8;width:min(560px,42vw)}
.hero-copy h1{margin:0 0 24px;font-size:clamp(34px,4.2vw,68px);line-height:1.02;letter-spacing:-.055em;font-weight:700}
.hero-copy p{margin:0;max-width:37em;color:#c6c6c1;font-size:13px;line-height:1.95}
.hero-copy strong{color:#fff;font-weight:700}
.hero-support{margin-top:26px!important;padding-top:22px;border-top:1px solid rgba(255,255,255,.24)}
.hero-support b{color:var(--cyan);font-weight:700;font-size:1.6em}
.hero-character{position:absolute;right:-2.5vw;bottom:-6vh;width:min(780px,53vw);height:min(900px,88vh);z-index:4;pointer-events:none}
.hero-character img{position:absolute;right:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:right bottom;opacity:0;filter:drop-shadow(0 28px 38px rgba(0,0,0,.48));animation:swap 12s steps(1,end) infinite}
.hero-character img:nth-child(1){animation-delay:0s}.hero-character img:nth-child(2){animation-delay:4s}.hero-character img:nth-child(3){animation-delay:8s}
@keyframes swap{0%,33.3%{opacity:1}33.31%,100%{opacity:0}}
.hero-logo{position:absolute;left:44%;bottom:28px;z-index:7;width:min(660px,43vw);transform:translateX(-10%);pointer-events:none}
.hero-logo img{width:100%;filter:drop-shadow(0 4px 20px rgba(0,0,0,.36))}
.scrollmark{position:absolute;right:0;bottom:36px;z-index:10;font:500 9px/1 var(--latin);letter-spacing:.16em;color:#787875;writing-mode:vertical-rl}

.strip{border-bottom:1px solid var(--line);overflow:hidden;background:#020202}
.strip img{width:100%;height:min(56vw,720px);object-fit:cover;object-position:center;filter:brightness(.84)}
.strip-meta{width:min(1540px,calc(100% - 60px));margin:auto;display:flex;justify-content:space-between;padding:14px 0 16px;font:500 9px/1 var(--latin);letter-spacing:.12em;color:#72726e}

.wrap{width:min(1460px,calc(100% - 60px));margin:auto}
.section{padding:116px 0 132px;border-bottom:1px solid var(--line)}
.section-head{display:grid;grid-template-columns:170px 1fr;gap:28px;margin-bottom:66px;align-items:end}
.section-kicker{font:500 10px/1.35 var(--latin);letter-spacing:.16em;color:#757570}
.section-title{margin:0;font:600 clamp(58px,8.4vw,128px)/.78 var(--latin);letter-spacing:-.075em}

.track{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.55fr);gap:54px;align-items:start;padding:0 0 100px;margin-bottom:100px;border-bottom:1px solid var(--line)}
.track:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.track-video{position:relative;background:#0a0a0a}
.track-video video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.track-index{position:absolute;left:0;top:-34px;font:500 9px/1 var(--latin);letter-spacing:.17em;color:#74746f}
.track-meta{padding-top:2px}
.track-tag{margin:0 0 20px;font:700 10px/1 var(--latin);letter-spacing:.18em;color:var(--cyan)}
.track.remix .track-tag{color:var(--orange)}
.track h3{margin:0;font-size:clamp(32px,3.8vw,58px);line-height:1.08;letter-spacing:-.05em;font-weight:700}
.track .artist{margin:13px 0 28px;font:500 12px/1.5 var(--latin);letter-spacing:.03em;color:#a2a29e}
.track .desc{margin:0 0 34px;color:#bdbdb8;font-size:12px;line-height:2}
.links{border-top:1px solid #333}
.links a,.links .disabled{display:flex;justify-content:space-between;align-items:center;min-height:54px;border-bottom:1px solid #333;font:600 11px/1 var(--latin);letter-spacing:.12em;transition:.18s}
.links a:hover{padding-left:8px;color:var(--cyan)}
.track.remix .links a:hover{color:var(--orange)}
.links .disabled{color:#555;cursor:not-allowed}

.support{padding:120px 0 130px;display:grid;grid-template-columns:1fr .46fr;gap:80px;align-items:end}
.support h2{margin:0;font-size:clamp(38px,5.7vw,86px);line-height:1.09;letter-spacing:-.056em;font-weight:700}
.support h2 b{color:var(--cyan)}
.support p{margin:30px 0 0;max-width:44em;color:#adada8;font-size:13px;line-height:2}
.support p b{color:var(--cyan);font-weight:700;font-size:2em}
.support-side{font:500 9px/1.9 var(--latin);letter-spacing:.14em;color:#696965}
.footer{height:150px;display:flex;align-items:center;justify-content:space-between;font:500 9px/1 var(--latin);letter-spacing:.08em;color:#686864}
.footer-logo{height:20px;width:auto;display:block}

@media(max-width:900px){
  .hero-inner,.strip-meta,.wrap{width:calc(100% - 34px)}
  .hero-copy{width:54vw}.hero-character{right:-14vw;width:70vw}.hero-logo{left:39%;width:56vw}
  .track{grid-template-columns:1fr;gap:30px}.track-meta{max-width:620px}.section-head{grid-template-columns:110px 1fr}.support{grid-template-columns:1fr;gap:42px}
}
@media(max-width:620px){
  .header{height:54px;padding:0 14px}.nav{gap:12px}.nav a{font-size:8px}.nav a:nth-child(2){display:none}
  .hero{padding-top:54px;min-height:790px}.hero-bg,.hero::before,.gears{inset:54px 0 0;height:calc(100% - 54px)}
  .hero-inner,.strip-meta,.wrap{width:calc(100% - 28px)}
  .hero-meta{top:28px}.hero-copy{left:0;bottom:34px;width:100%;padding-right:4vw}.hero-copy h1{font-size:47px}.hero-copy p{font-size:11px;max-width:78%}.hero-support{max-width:84%!important}
  .hero-character{right:-44vw;bottom:5vh;width:112vw;height:63vh;opacity:.84}.hero-logo{left:2%;bottom:225px;width:77vw;transform:none}.scrollmark{display:none}
  .strip img{height:58vh}.strip-meta{font-size:7px;gap:12px}
  .section{padding:84px 0 95px}.section-head{grid-template-columns:1fr;gap:12px;margin-bottom:54px}.section-title{font-size:68px}.track{gap:24px;padding-bottom:74px;margin-bottom:76px}.track-index{top:-26px}.track h3{font-size:38px}.support{padding:90px 0 98px}.support h2{font-size:45px}.footer{height:120px}
}
@media(prefers-reduced-motion:reduce){.hero-character img{animation:none}.hero-character img:first-child{opacity:1}}