section{padding:5rem var(--pad);max-width:960px;margin:0 auto}
@media(max-width:640px){
  section{padding:3rem 5vw}
  .ep{padding:1.5rem}
  .ep-header{flex-direction:column;gap:.75rem}
  .ep-header .art-thumb{width:80px;height:80px}
  .platforms{grid-template-columns:repeat(2,1fr)}
}

.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.r1{transition-delay:.1s}.r2{transition-delay:.2s}.r3{transition-delay:.3s}.r4{transition-delay:.4s}.r5{transition-delay:.5s}

.section-label{
  font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;
  color:#3a3a3a;margin-bottom:1.5rem;font-weight:600
}

/* intro */
.intro-text p{
  font-size:1.05rem;margin-bottom:1.4rem;color:var(--text);font-weight:300;
  font-family:"IBM Plex Sans JP",sans-serif;letter-spacing:.04em
}
.intro-text .jp{color:#7a7a7a;font-size:.9rem;margin-top:1.5rem;letter-spacing:.05em}
.intro-text .en{color:#5a5a5a;font-size:.85rem;font-style:italic;font-family:"Space Grotesk",sans-serif;letter-spacing:.02em}

/* ep block */
.ep{
  margin:4rem 0;padding:2.5rem;border-radius:6px;
  background:var(--surface);border:1px solid rgba(255,255,255,.04);
  transition:border-color .3s,background .3s
}
.ep:hover{border-color:var(--border-hover);background:rgba(255,255,255,.02)}
.ep-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;margin-bottom:1.5rem
}
.ep-header .info{flex:1}
.ep-header h2{
  font-size:1.5rem;font-weight:300;color:#d0d0d0;letter-spacing:.05em
}
.ep-header h2 .vol{color:var(--text-dim);font-size:.9rem;font-weight:400;letter-spacing:.15em;display:block}
.ep-header .meta{
  font-size:.75rem;color:var(--text-dim);letter-spacing:.1em;margin-top:.4rem
}
.ep-header .label{color:#444;font-size:.7rem;letter-spacing:.15em}
.ep-header .art-thumb{
  width:100px;height:100px;flex-shrink:0;border-radius:4px;overflow:hidden
}
.ep-header .art-thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3)}
.ep-note{
  font-size:.85rem;color:#6a6a6a;margin:1rem 0;font-style:italic
}

/* streaming platforms */
.platforms{
  margin-top:2rem;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:1rem
}
.platforms a{
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  padding:1.5rem 1rem;border:1px solid rgba(255,255,255,.04);
  border-radius:6px;background:rgba(255,255,255,.01);
  transition:border-color .25s,background .25s,transform .2s;
  text-decoration:none;color:#777;font-size:.75rem;
  letter-spacing:.08em;text-transform:uppercase;
  border-bottom:none
}
.platforms a:hover{
  border-color:rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  transform:translateY(-2px);
  color:#999
}
.platforms a svg{
  width:32px;height:32px;fill:currentColor;opacity:.7;transition:opacity .25s
}
.platforms a:hover svg{opacity:1}
.platforms .platform-unavailable{
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  padding:1.5rem 1rem;border:1px dashed rgba(255,255,255,.06);
  border-radius:6px;background:rgba(255,255,255,.01);color:#555;font-size:.75rem;
  letter-spacing:.08em;text-align:center;text-transform:uppercase
}
.platforms .platform-unavailable svg{width:32px;height:32px;fill:currentColor;opacity:.45}

/* tracklist */
.tracks{list-style:none}
.tracks li{
  display:flex;align-items:center;padding:.65rem .8rem;gap:1rem;
  border-bottom:1px solid rgba(255,255,255,.03);border-radius:3px;
  transition:background .2s,transform .15s;cursor:pointer
}
.tracks li:hover{background:rgba(255,255,255,.03);transform:translateX(3px)}
.tracks .num{color:#3a3a3a;font-size:.75rem;width:1.8rem;text-align:right;font-variant-numeric:tabular-nums}
.tracks li:hover .num{color:#666}
.tracks .ico{color:#222;font-size:.6rem;width:1.2rem;text-align:center;transition:color .2s}
.tracks li:hover .ico{color:var(--text-dim)}
.tracks .ttl{color:var(--text);font-size:.95rem;flex:1;transition:color .2s}
.tracks li:hover .ttl{color:#ddd}
.tracks li.playing{position:relative;background:rgba(255,255,255,.03)}
.tracks li.playing::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent,transparent 9px,rgba(255,255,255,.025) 9px,rgba(255,255,255,.025) 10px),repeating-linear-gradient(0deg,transparent,transparent 9px,rgba(255,255,255,.025) 9px,rgba(255,255,255,.025) 10px);
  animation:geoPulse 2.5s ease-in-out infinite;pointer-events:none
}
@keyframes geoPulse{0%,100%{opacity:.4}50%{opacity:1}}
.tracks li.playing .ttl{color:#e8e8e8}
.tracks li.playing .ico{color:#888}
.tracks .dur{color:#3a3a3a;font-size:.7rem;font-family:monospace;letter-spacing:.05em}

/* coming soon */
.coming{
  padding:3rem;text-align:center;border:1px dashed #222;border-radius:6px;
  margin:4rem 0;transition:border-color .3s;
  cursor:pointer
}
.coming:hover{border-color:#333}
.coming-artwork{
  display:block;width:min(100%,540px);margin:0 auto 2rem;border-radius:4px;
  filter:grayscale(.15);transition:filter .3s ease
}
.coming:hover .coming-artwork{filter:grayscale(0)}
.coming .q{font-size:2.5rem;color:#1a1a1a;user-select:none;margin-bottom:1rem}
.coming h3{font-size:1.3rem;font-weight:300;color:#888;letter-spacing:.08em}
.coming p{font-size:.85rem;color:#444;margin-top:.5rem}

/* statement */
.statement{
  max-width:800px;margin:4rem auto;padding:0 var(--pad)
}
.statement blockquote{
  border-left:2px solid #222;padding:0 0 0 2rem;font-size:1.05rem;
  color:var(--text);font-weight:300;
  font-family:"IBM Plex Sans JP",sans-serif;letter-spacing:.04em
}
.statement blockquote p{margin-bottom:1rem}
.statement .cite{font-size:.75rem;color:#444;margin-top:.75rem;letter-spacing:.15em;font-family:"Space Grotesk",sans-serif}

/* footer */
footer{
  padding:4rem var(--pad) 5rem;text-align:center;color:#333;font-size:.75rem;letter-spacing:.12em
}
footer a{color:#4a4a4a;border-color:#222}
footer a:hover{color:#777}

.geo-divider,.geo-pattern{
  position:relative;
  width:100%;
  background:var(--bg);
  overflow:hidden
}
.geo-divider{height:180px}
.geo-pattern{height:400px}