:root{
  --bg:#000;
  --fg:#fff;
  --mute:rgba(255,255,255,.55);
  --hush:rgba(255,255,255,.32);
  --pad:clamp(20px,3vw,40px);
  --sans:'Inter',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --brutal:'Oswald',Impact,'Arial Narrow',sans-serif;
  --flare:'Bodoni Moda',Didot,'Times New Roman',serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#000;color:#fff;font-family:var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:#fff;color:#000}

/* scroll snap container */
.scroll{
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  height:100vh;overflow-y:scroll;overflow-x:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  contain:layout paint;
}
.scroll::-webkit-scrollbar{display:none}
.panel{
  scroll-snap-align:start;
  position:relative;height:100vh;width:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
  /* offscreen panels skip rendering work */
  content-visibility:auto;
  contain-intrinsic-size:100vh;
}

/* video bed */
.bed{position:absolute;inset:0;z-index:0;background:#000 var(--img-pos,center)/cover no-repeat}
.bed video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(100%) contrast(1.1) brightness(.62);
}
.bed.still{filter:grayscale(100%) contrast(1.05) brightness(.55)}
.bed::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 60%, rgba(0,0,0,.75) 100%);
}

/* film-cut fade between snapped sections */
.panel::before{
  content:"";position:absolute;inset:0;z-index:30;background:#000;
  opacity:1;pointer-events:none;
  transition:opacity 200ms linear;
}
.panel.in::before{opacity:0}

/* hero */
.hero .content{
  position:relative;z-index:5;padding:0 var(--pad) clamp(48px,8vw,120px);
  display:flex;flex-direction:column;gap:clamp(28px,5vw,56px);
  align-items:flex-start;
}
.wordmark{
  font-family:var(--brutal);
  font-weight:700;
  font-size:clamp(72px,16vw,260px);
  line-height:.88;letter-spacing:-.005em;
  text-transform:uppercase;
  margin:0;
  color:transparent;
  -webkit-text-stroke:1.25px #fff;
}
.wordmark .sub{
  display:block;font-size:.46em;font-weight:600;letter-spacing:.06em;
  margin-top:.02em;
  -webkit-text-stroke:1px #fff;
}
.hero-mark{
  display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px);
  user-select:none;-webkit-user-select:none;
}
.hero-socials{
  display:flex;gap:clamp(18px,2.2vw,28px);flex-wrap:wrap;
}
.hero-socials a{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  transition:color .15s ease;
}
.hero-socials a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.hero .lede{
  margin:0;font-size:clamp(18px,2vw,28px);font-weight:400;letter-spacing:-.005em;
  max-width:24ch;color:#fff;line-height:1.35;
}
.scroll-cue{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  z-index:6;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--hush);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.scroll-cue .line{width:1px;height:36px;background:rgba(255,255,255,.45);
  animation:drop 2s ease-in-out infinite}
@keyframes drop{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* corner mark — only chrome */
.mark{
  position:fixed;top:18px;left:var(--pad);z-index:80;
  display:flex;align-items:center;gap:10px;
  color:#fff;
  mix-blend-mode:difference;
}
.mark .stamp{
  width:22px;height:30px;display:block;
  background:url("../assets/sp-logo.svg") center/contain no-repeat;
  filter:invert(1);
}
.mark .name{font-size:12px;font-weight:500;letter-spacing:.04em}

/* hamburger button — top-right corner chrome */
.menu-btn{
  position:fixed;top:18px;right:var(--pad);z-index:120;
  width:32px;height:32px;padding:0;
  background:transparent;border:0;cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;
  mix-blend-mode:difference;
}
.menu-btn span{
  display:block;height:1.5px;background:#fff;
  transition:transform .3s ease, opacity .2s ease, width .25s ease;
}
.menu-btn span:nth-child(1){width:22px}
.menu-btn span:nth-child(2){width:16px}
.menu-btn span:nth-child(3){width:22px}
.menu-btn:hover span:nth-child(2){width:22px}
.menu-btn[aria-expanded="true"]{mix-blend-mode:normal}
.menu-btn[aria-expanded="true"] span:nth-child(1){width:22px;transform:translateY(6.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){width:22px;transform:translateY(-6.5px) rotate(-45deg)}

/* sidebar */
.sidebar-backdrop{
  position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.55);
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
  backdrop-filter:blur(4px);
}
.sidebar-backdrop.show{opacity:1;pointer-events:auto}

.sidebar{
  position:fixed;top:0;right:0;bottom:0;z-index:100;
  width:min(440px, 92vw);
  background:#000;border-left:1px solid rgba(255,255,255,.08);
  transform:translateX(100%);
  transition:transform .35s ease;
  display:flex;flex-direction:column;
  padding:clamp(80px,9vw,120px) var(--pad) clamp(32px,4vw,48px);
}
.sidebar.open{transform:translateX(0)}

.sidebar-nav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:clamp(14px,2vw,24px);
}
.sidebar-nav a{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(28px,3vw,44px);letter-spacing:-.02em;line-height:1;
  color:#fff;
  transition:color .15s ease;
  display:inline-block;
}
.sidebar-nav a:hover{color:var(--mute)}

.sidebar-shops{
  margin-top:clamp(14px,2vw,24px);padding-top:clamp(14px,2vw,24px);
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;gap:clamp(14px,2vw,24px);
}
.sidebar-shops a{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(20px,2.2vw,32px);letter-spacing:-.01em;line-height:1;
  color:#fff;
  transition:color .15s ease;
}
.sidebar-shops a:hover{color:var(--mute)}

/* lock main scroll while sidebar is open */
body.menu-open .scroll{overflow:hidden}

/* artist section */
.artist .content{
  position:relative;z-index:5;padding:0 var(--pad) clamp(40px,6vw,80px);
  display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,28px);
  align-items:end;
}
.artist .content{
  --name-fs:clamp(56px,11vw,180px);
}
.artist .name{
  font-family:var(--sans);
  font-weight:600;
  font-size:var(--name-fs);
  line-height:.92;letter-spacing:-.03em;
  margin:0;
}
.artist .caption{
  margin:0;max-width:42ch;font-size:clamp(15px,1.4vw,18px);font-weight:400;
  color:#fff;line-height:1.5;
}
.artist .caption span{color:var(--mute)}

.artist-socials{
  display:flex;flex-wrap:wrap;gap:clamp(14px,1.5vw,22px);
  margin-top:clamp(12px,1.4vw,18px);
  /* push right by ~LSB of Inter capitals (~7% of font-size).
     Tracks with the artist name's actual rendered size, every viewport. */
  margin-left:calc(var(--name-fs) * .067);
}
.artist-socials a{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  transition:color .15s ease;
}
.artist-socials a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}

/* below-the-fold catalog */
.albums-panel{
  background:#000;
  height:auto;min-height:100vh;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:clamp(28px,4vw,56px) var(--pad);
  gap:clamp(20px,3vw,36px);
  overflow:visible;
}
.albums-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.albums-head .who{
  font-size:clamp(22px,2.4vw,32px);font-weight:500;letter-spacing:-.01em;margin:0;
}
.albums-head .who small{display:block;color:var(--mute);font-size:13px;font-weight:400;letter-spacing:.02em;margin-top:4px}
.albums-head .total{
  font-size:12px;color:var(--mute);letter-spacing:.06em;
}

/* row: a labelled section inside the catalog (Albume / Single-uri) */
.row{display:flex;flex-direction:column;gap:clamp(20px,2.5vw,32px)}
.row-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  border-top:1px solid rgba(255,255,255,.08);padding-top:14px;
}
.row-label{
  font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#fff;
}
.row-meta{display:flex;align-items:center;gap:18px}
.row-count{font-size:11px;letter-spacing:.06em;color:var(--mute)}

/* horizontal strip controls */
.strip-nav{display:flex;gap:8px}
.strip-btn{
  width:32px;height:32px;border:1px solid rgba(255,255,255,.4);
  background:transparent;color:#fff;cursor:pointer;
  font-family:var(--sans);font-size:18px;line-height:1;
  display:grid;place-items:center;
  transition:background .15s ease, color .15s ease, border-color .15s ease, opacity .2s ease;
}
.strip-btn:hover{background:#fff;color:#000;border-color:#fff}
.strip-btn:disabled{opacity:.2;cursor:default}
.strip-btn:disabled:hover{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}

/* horizontal strip of releases (reuses .album internals) */
.singles-strip,
.albums-strip{
  display:flex;gap:clamp(16px,2vw,28px);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
  padding-bottom:4px;
  /* allow vertical page scroll on touch even when finger lands on strip */
  touch-action:pan-x pan-y;
}
.singles-strip::-webkit-scrollbar,
.albums-strip::-webkit-scrollbar{display:none}
.singles-strip.dragging,
.albums-strip.dragging{cursor:grabbing;scroll-snap-type:none}
.singles-strip.dragging a,
.singles-strip.dragging .cover,
.albums-strip.dragging a,
.albums-strip.dragging .cover{pointer-events:none}
.singles-strip > .album,
.albums-strip > .album{
  flex:0 0 clamp(150px,18vw,210px);
  scroll-snap-align:start;
}
.albums-strip > .album{
  flex-basis:clamp(180px,22vw,240px);
}

.album{position:relative;display:flex;flex-direction:column;gap:14px}
.album .cover{
  display:block;aspect-ratio:1/1;width:100%;
  background:#111 center/cover no-repeat;
  transition:transform .4s ease, opacity .4s ease;
}
.album:hover .cover{transform:scale(1.012);opacity:.92}
.album .meta{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:13px;
}
.album .meta .t{font-weight:500}
.album .meta .y{color:var(--mute);font-variant-numeric:tabular-nums}

.platforms{
  display:flex;gap:14px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.04em;color:var(--mute);
  opacity:0;transform:translateY(2px);transition:opacity .25s ease, transform .25s ease;
  margin-top:-2px;
}
.album:hover .platforms,
.album:focus-within .platforms{opacity:1;transform:translateY(0)}
.platforms a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* footer */
.footer{
  background:#000;padding:clamp(40px,5vw,72px) var(--pad);
  border-top:1px solid rgba(255,255,255,.08);
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;align-items:start;
  font-size:13px;color:var(--mute);
  scroll-snap-align:start;
}
.footer a{color:#fff}
.footer a:hover{text-decoration:underline;text-underline-offset:3px}
.footer .col{display:flex;flex-direction:column;gap:6px}
.footer .col.right{align-items:flex-end;text-align:right}
.footer .col.center{align-items:center;text-align:center}
.footer-logo{display:inline-block;height:clamp(44px,5vw,64px)}
.footer-logo img{height:100%;width:auto;display:block;filter:invert(1);opacity:.85;
  transition:opacity .15s ease}
.footer-logo:hover img{opacity:1}

/* loading screen */
.loader{
  position:fixed;inset:0;z-index:200;background:#000;
  display:grid;place-items:center;
  transition:opacity .8s ease;
}
.loader img{
  width:clamp(48px,4vw,64px);height:auto;
  filter:invert(1);
  animation:loader-pulse 1.4s ease-in-out infinite;
}
@keyframes loader-pulse{
  0%,100%{opacity:.45;transform:scale(.94)}
  50%{opacity:1;transform:scale(1)}
}
.loader.hidden{opacity:0;pointer-events:none}
@media (prefers-reduced-motion: reduce){
  .loader img{animation:none}
}
@media (max-width:760px){
  .footer{grid-template-columns:1fr;gap:18px}
  .footer .col,.footer .col.center,.footer .col.right{align-items:flex-start;text-align:left}
  .hero .content{padding-bottom:clamp(70px,10vh,120px)}
  .wordmark{font-size:clamp(52px,15vw,72px)}
  .albums-panel{padding-top:64px}
}

/* the one moment of flare */
.flare{
  font-family:var(--flare);
  font-style:italic;
  font-weight:900;
  letter-spacing:-.01em;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .scroll{scroll-behavior:auto}
  .panel::before{transition:none}
  .scroll-cue .line{animation:none}
  .album .cover,.album:hover .cover{transition:none;transform:none}
  .platforms{transition:none}
}