.music-singles-page{background:#050505;color:var(--white)}
.music-singles-page:before{content:"";position:fixed;z-index:0;inset:0;background:linear-gradient(rgba(0,0,0,.58),rgba(0,0,0,.82)),url("assets/music-bg.webp") center/cover no-repeat;pointer-events:none}
.music-singles-page .site-header{background:rgba(5,5,5,.9)}
.music-singles-page main,.music-singles-page footer{position:relative;z-index:1}
.singles-hero{min-height:520px;padding:clamp(150px,19vh,210px) var(--pad) 80px;display:flex;flex-direction:column;justify-content:flex-end;border-bottom:1px solid var(--line)}
.singles-hero h1{margin:28px 0 36px;font:500 clamp(76px,14vw,210px)/.76 "Space Grotesk";letter-spacing:-.08em}
.singles-hero-meta{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.18);padding-top:16px;color:#777;font:500 8px/1 "Space Grotesk";letter-spacing:.2em}
.singles-hero-meta strong{color:var(--red);font-weight:500}
.singles-archive{padding:clamp(90px,11vw,160px) var(--pad)}
.singles-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:clamp(48px,7vw,90px)}
.singles-heading h2{margin:24px 0 0;font:500 clamp(44px,7vw,96px)/.85 "Space Grotesk";letter-spacing:-.065em}
.singles-heading>p{margin:0;color:#888;font:300 11px/1.8 "Noto Sans JP";letter-spacing:.06em}
.singles-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;align-items:stretch;gap:30px;width:min(100%,1480px);margin-inline:auto}
.single-card{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(80px,.55fr);height:100%;min-width:0;overflow:hidden;border:1px solid rgba(125,220,255,.24);background:#f4f7fb;box-shadow:0 10px 26px rgba(0,0,0,.2)}
.single-card.is-latest{border-color:rgba(237,28,36,.68)}
.single-cover{position:relative;isolation:isolate;aspect-ratio:1;overflow:hidden;background-color:#111;background-position:center;background-size:cover}
.single-cover:after{content:"";position:absolute;z-index:0;inset:0;background:linear-gradient(135deg,transparent 52%,rgba(125,220,255,.14));pointer-events:none}
.single-cover:before{content:"";position:absolute;z-index:1;right:9%;bottom:9%;left:9%;height:15%;background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(125,220,255,.7) 5px 6px);opacity:.42;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16% 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16% 84%,transparent);pointer-events:none}
.single-cover-08{background-image:radial-gradient(circle at 72% 28%,#e9fbff 0 1%,#24758d 2% 15%,#0b1820 16% 39%,#72131a 40% 42%,#050505 65%)}
.single-cover-07{background-image:linear-gradient(118deg,#050505 0 27%,#303030 28% 45%,#168bb5 46% 48%,#0b1115 49% 70%,#681118 71% 73%,#050505 74%)}
.single-cover-06{background-image:linear-gradient(152deg,#050505 0 32%,#1d586c 33% 35%,#111 36% 57%,#8b151c 58% 60%,#080808 61%)}
.single-cover-05{background-image:radial-gradient(ellipse at 38% 42%,#d7edf2 0 1%,#164451 2% 17%,#090909 18% 52%,#541016 78%,#050505)}
.single-cover-04{background-image:radial-gradient(circle at 67% 32%,#e8e5dc 0 1%,#5b1117 2% 19%,#090909 48%,#171717)}
.single-cover-03{background-image:linear-gradient(132deg,#090909 0 42%,#921820 43% 45%,#222 46% 68%,#050505 69%)}
.single-cover-02{background-image:repeating-radial-gradient(circle at 30% 66%,#080808 0 18px,#381014 19px 21px,#111 22px 38px)}
.single-cover-01{background-image:linear-gradient(35deg,#050505 10%,#2a2a2a 11% 34%,#74131a 35% 37%,#0a0a0a 38% 72%,#333 73%)}
.single-cover>span{position:absolute;z-index:3;top:10px;left:10px;padding:5px 7px;background:var(--red);color:#fff;font:600 6px/1 "Space Grotesk";letter-spacing:.14em}
.single-play{position:absolute;z-index:3;top:50%;left:50%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;color:#fff;transform:translate(-50%,-50%);cursor:pointer}
.single-play i{display:grid;width:34px;height:34px;place-items:center;border:1px solid rgba(125,220,255,.88);border-radius:50%;background:rgba(2,10,16,.52);font:normal 6px/1 "Space Grotesk";text-indent:2px}
.single-play b{font:600 5px/1 "Space Grotesk";letter-spacing:.09em;white-space:nowrap;text-shadow:0 1px 5px #000}
.single-play:disabled{cursor:default;opacity:.62}
.single-info{position:relative;display:flex;min-width:0;flex-direction:column;padding:clamp(9px,.9vw,12px) clamp(6px,.7vw,9px);border-left:1px solid rgba(125,220,255,.82);background-image:linear-gradient(rgba(125,220,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(125,220,255,.055) 1px,transparent 1px),linear-gradient(180deg,rgba(255,255,255,.96),rgba(239,246,251,.98));background-size:11px 11px,11px 11px,auto;color:#111}
.single-info:before{content:"";position:absolute;top:0;left:-1px;width:2px;height:29px;background:#7ddcff}
.is-latest .single-info{border-left-color:rgba(237,28,36,.82)}
.is-latest .single-info:before{background:var(--red)}
.single-type{color:#168bb5;font:600 5.5px/1 "Space Grotesk";letter-spacing:.1em}
.is-latest .single-type{color:var(--red)}
.single-info h3{margin:clamp(9px,1vw,13px) 0 4px;font:600 clamp(11px,.85vw,14px)/1.08 "Space Grotesk";letter-spacing:-.02em;overflow-wrap:anywhere}
.single-info p{margin:0;color:#68717b;font:500 5.5px/1.3 "Space Grotesk";letter-spacing:.06em;text-transform:uppercase}
.single-info time{margin-top:auto;padding-top:9px;border-top:1px solid rgba(17,17,17,.12);color:#168bb5;font:600 5.5px/1 "Space Grotesk";letter-spacing:.07em}
.is-latest .single-info time{color:var(--red)}
.singles-bottom-nav{margin-top:clamp(90px,12vw,170px);padding-top:36px;border-top:1px solid var(--line)}
.singles-bottom-nav a{display:inline-flex;align-items:center;gap:16px;min-height:54px;padding:0 18px;border:1px solid #444;font:500 10px/1 "Space Grotesk";letter-spacing:.16em}
@media(hover:hover) and (pointer:fine){.single-card{transition:transform .35s ease,box-shadow .35s ease}.single-card:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(0,0,0,.3)}.single-play:not(:disabled):hover i{border-color:#bff3ff;background:rgba(125,220,255,.12)}}
@media(max-width:1200px) and (min-width:901px){.singles-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px) and (min-width:761px){.singles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.single-card{grid-template-columns:minmax(0,1.7fr) minmax(115px,.7fr)}}
@media(max-width:760px){.music-singles-page:before{background-image:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.84)),url("assets/music-bg-mobile.webp")}.singles-hero{min-height:430px;padding-top:120px;padding-bottom:58px}.singles-hero h1{font-size:19vw;margin:24px 0 30px}.singles-hero-meta{font-size:6px;letter-spacing:.13em}.singles-archive{padding-top:78px}.singles-heading{display:block;margin-bottom:42px}.singles-heading h2{font-size:12vw}.singles-heading>p{margin-top:20px;font-size:10px}.singles-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:24px;width:100%}.single-card{grid-template-columns:minmax(0,1.55fr) minmax(108px,.85fr);width:100%}.single-cover>span{top:7px;left:7px;padding:5px 6px;font-size:5px}.single-play{gap:6px}.single-play i{width:40px;height:40px;font-size:7px}.single-play b{font-size:5.5px;letter-spacing:.1em}.single-info{padding:12px 9px 13px}.single-info:before{height:34px}.single-type{font-size:6px}.single-info h3{margin:13px 0 6px;font-size:clamp(13px,3.7vw,16px);line-height:1.1}.single-info p{font-size:6px;letter-spacing:.08em}.single-info time{padding-top:12px;font-size:6px;letter-spacing:.09em}.singles-bottom-nav{margin-top:88px}}