:root{
  --bg:#f6f6f4;              /* keep in sync with BG in js/site.js */
  --fg:#111112;
  --muted:rgba(17,17,18,0.55);
  --faint:rgba(17,17,18,0.16);
  --glow:rgba(150,200,240,0.16); /* the faint sky-blue halo in the middle */
  --pad:28px;
  --hero-top:88px;           /* set by js/site.js */
  --hero-h:420px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  /* one easing for everything: quick to start, long soft landing */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  background:radial-gradient(ellipse 42% 46% at 50% 50%, var(--glow), rgba(150,200,240,0) 70%) fixed, var(--bg);
  color:var(--fg);
  overflow:hidden;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.2px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;-webkit-tap-highlight-color:transparent;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
:focus-visible{outline:1px dashed var(--fg);outline-offset:4px;}
::selection{background:var(--fg);color:var(--bg);}

#space{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;}
body.is-hovering #space{cursor:pointer;}

.grain{
  /* moving film grain over the whole site (loader, records, text, overlays), for a cinematic feel.
     One tile of light and dark specks, moved by the compositor only, so it costs almost nothing. */
  position:fixed;inset:-64px;pointer-events:none;z-index:1000;
  background:url("../assets/grain.png") 0 0/256px 256px repeat;
  will-change:transform;
  animation:grain .8s steps(1) infinite;
}
@keyframes grain{
  0%{transform:translate3d(0,0,0);}
  17%{transform:translate3d(-37px,23px,0);}
  33%{transform:translate3d(29px,-41px,0);}
  50%{transform:translate3d(-53px,-11px,0);}
  67%{transform:translate3d(43px,37px,0);}
  83%{transform:translate3d(-19px,51px,0);}
  100%{transform:translate3d(0,0,0);}
}


/* ---------- chrome ---------- */
.top{
  position:fixed;left:0;right:0;top:0;height:68px;z-index:40;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 var(--pad);
  pointer-events:none;
}
.top > *{pointer-events:auto;}
.logo{display:block;}
.logo img{width:76px;height:auto;display:block;}
/* the R4N in the corner: same tone as the background, just a little lighter */
.top .logo{opacity:0;transition:opacity 1.2s var(--ease) .4s;}
/* the R4N in the corner: same tone as the background, just a little darker */
.top .logo img{filter:invert(1);opacity:0.1;transition:opacity .6s var(--ease);}
body.is-loaded .top .logo{opacity:1;}
#indexBtn{opacity:0;pointer-events:none;transition:opacity 1.2s var(--ease) .4s,color .4s var(--ease);}
body.is-loaded #indexBtn{opacity:1;pointer-events:auto;}
body.detail-open #indexBtn,body.index-open #indexBtn{opacity:0;pointer-events:none;transition-delay:0s;}
.top .logo:hover img{opacity:0.3;}

.textBtn{
  color:var(--muted);letter-spacing:2px;font-size:12px;padding:8px 0;
  transition:color .4s var(--ease),opacity .6s var(--ease);
}
.textBtn:hover,.textBtn[aria-expanded="true"]{color:var(--fg);}
/* links live inside an opened record; the main screen shows only the covers */
.socials{
  margin:44px auto 0;justify-content:center;
  color:var(--muted);font-size:12px;letter-spacing:.4px;white-space:nowrap;
  display:flex;gap:10px;
}
.socials a{text-decoration:none;transition:color .4s var(--ease);}
.socials a:hover{color:var(--fg);}

/* ---------- index list ---------- */
.index{
  position:fixed;inset:0;z-index:30;
  background:rgba(246,246,244,0.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  overflow-y:auto;
  padding:110px var(--pad) 100px;
  animation:fadeIn .6s var(--ease) both;
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.index__close{position:fixed;top:14px;right:var(--pad);padding:14px 0;}
.index__list{list-style:none;max-width:760px;margin:0 auto;}
.index__item{animation:rise .7s var(--ease) both;animation-delay:calc(var(--k, 0) * 45ms);}
.index__item button{
  width:100%;display:grid;grid-template-columns:28px 56px 1fr auto;gap:18px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--faint);text-align:left;
}
.index__num{color:var(--muted);font-size:11px;letter-spacing:1px;}
.index__item img{width:56px;height:56px;object-fit:cover;display:block;background:#ddd;transition:transform .5s var(--ease);}
.index__title{display:block;font-size:14px;letter-spacing:1.6px;text-transform:uppercase;}
.index__sub{display:block;color:var(--muted);font-size:11px;letter-spacing:1px;margin-top:4px;}
.index__year{color:var(--muted);font-size:11px;letter-spacing:1px;}
.index__item button:hover img{transform:scale(1.06);}
.index__item button:hover .index__title{text-decoration:underline;text-underline-offset:4px;}
.index__empty{color:var(--muted);text-align:center;letter-spacing:1.4px;}

/* ---------- one release ---------- */
.detail{
  position:fixed;inset:0;z-index:25;
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--ease),visibility 0s linear .5s;
}
.detail.is-open{opacity:1;visibility:visible;transition:opacity .9s var(--ease) .35s,visibility 0s;}
.detail__close{position:fixed;top:14px;right:var(--pad);z-index:2;padding:14px 0;}
/* one screen, never scrolls: the record on top, the details underneath */
.detail__scroll{
  position:absolute;inset:0;overflow:hidden;
  display:flex;flex-direction:column;
  padding:0 var(--pad) calc(16px + env(safe-area-inset-bottom));
}
/* the space the 3D record sits in; dragging here tilts it */
.detail__hero{
  flex:none;height:calc(var(--hero-top) + var(--hero-h) + 14px);
  margin:0 calc(var(--pad) * -1);
  display:flex;justify-content:center;align-items:flex-end;padding-bottom:14px;
  cursor:grab;touch-action:none;
}
.detail__hero:active{cursor:grabbing;}
.detail__hero img{display:none;}
body.no3d .detail__hero{cursor:default;touch-action:auto;}
body.no3d .detail__hero img{display:block;height:var(--hero-h);width:var(--hero-h);object-fit:cover;}

/* the details sit in the space between the record and the footer */
.detail__info{
  flex:1;min-height:0;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:clamp(6px,1.5vh,18px) 0;
}
.detail__inner{width:100%;max-width:520px;transform-origin:50% 50%;}
.detail.is-open .detail__inner{animation:rise 1.1s var(--ease) .45s both;}
@keyframes rise{from{opacity:0;translate:0 14px;}to{opacity:1;translate:0 0;}}
.detail__meta{color:var(--muted);font-size:11px;letter-spacing:2px;text-transform:uppercase;}
.detail__title{margin-top:clamp(6px,1.2vh,12px);font-size:clamp(22px,min(4.4vw,5.2vh),40px);line-height:1.05;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;overflow-wrap:anywhere;}
.detail__artist{margin-top:clamp(6px,1.1vh,12px);color:var(--muted);letter-spacing:1.2px;}
.detail__artist a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--faint);transition:color .4s var(--ease),text-decoration-color .4s var(--ease);}
.detail__artist a:hover{color:var(--fg);text-decoration-color:currentColor;}
.detail__desc{line-height:1.65;color:rgba(17,17,18,0.86);}
.detail__desc a,.detail__credits a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--faint);transition:text-decoration-color .4s var(--ease);}
.detail__desc a:hover,.detail__credits a:hover{text-decoration-color:currentColor;}
.detail__credits{margin-top:clamp(10px,2.2vh,22px);display:flex;flex-direction:column;gap:4px;line-height:1.5;}
.detail__credits div{display:flex;justify-content:center;gap:12px;}
.detail__credits dt{color:var(--muted);text-transform:uppercase;font-size:11px;letter-spacing:1.4px;padding-top:2px;}
.detail__links{margin:clamp(14px,3.2vh,32px) auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.listen{
  display:inline-flex;gap:10px;align-items:center;
  padding:11px 16px;border:1px solid var(--faint);text-decoration:none;
  letter-spacing:1.8px;font-size:11px;text-transform:uppercase;white-space:nowrap;
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
}
.listen:hover{background:var(--fg);color:var(--bg);border-color:var(--fg);}
/* the platforms' own colours */
.listen--spotify{background:#1ed760;border-color:#1ed760;color:#000;font-weight:600;}
.listen--apple{background:#fa243c;border-color:#fa243c;color:#fff;font-weight:600;}
.listen--spotify:hover{background:#3be477;border-color:#3be477;color:#000;}
.listen--apple:hover{background:#ff4057;border-color:#ff4057;color:#fff;}
/* footer: PREV / ALL / NEXT, then the socials, pinned to the bottom of the screen */
.detail__foot{flex:none;padding-top:10px;}
.detail.is-open .detail__foot{animation:rise 1.1s var(--ease) .55s both;}
.detail__nav{margin:0 auto;display:flex;justify-content:space-between;align-items:center;max-width:420px;}
.detail .socials{margin-top:6px;}

/* ---------- loader: the white logo pulses softly, then fades away ---------- */
.loader{
  position:fixed;inset:0;z-index:60;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .8s var(--ease);
}
.loader__logo{
  width:min(42vw,260px);height:auto;display:block;
  filter:invert(1); /* the logo image is white: show it dark on the white page */
  animation:pulse 2.2s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes pulse{
  0%,100%{opacity:0.28;}
  50%{opacity:1;}
}
/* how far along: a hairline the width of the logo, and the percentage under it */
.loader__progress{width:min(42vw,260px);margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.loader__track{width:100%;height:1px;background:rgba(17,17,18,0.1);overflow:hidden;}
.loader__fill{
  height:100%;background:rgba(17,17,18,0.7);transform-origin:0 50%;transform:scaleX(0);
  animation:loaderBoot 2s cubic-bezier(.2,.7,.3,1) forwards; /* until the script takes over */
}
@keyframes loaderBoot{to{transform:scaleX(.06);}}
.loader__pct{font-size:10px;letter-spacing:2.4px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:4ch;text-align:center;}
.loader__note{position:absolute;bottom:40px;left:0;right:0;text-align:center;color:var(--muted);font-size:11px;letter-spacing:2px;}
.loader.is-leaving{opacity:0;pointer-events:none;}
.loader.is-done{display:none;}

.noscript{position:fixed;inset:auto 0 50% 0;text-align:center;z-index:70;}

/* ---------- small screens ---------- */
@media (max-width:768px){
  :root{--pad:16px;}
  .top{height:60px;}
  .logo img{width:62px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01s !important;transition-delay:0s !important;animation-duration:.01s !important;animation-delay:0s !important;}
}

/* ---------- MY SONGS / WORKED ON ---------- */
/* two quiet labels; the chosen one turns to pink holo foil */
.modeToggle{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:baseline;gap:14px;padding:6px 2px 12px;
  opacity:0;pointer-events:none;transition:opacity 1.2s var(--ease) .4s;
}
body.is-loaded .modeToggle{opacity:1;pointer-events:auto;}
body.detail-open .modeToggle{opacity:0;pointer-events:none;transition-delay:0s;}
.modeToggle button{
  font-size:11px;letter-spacing:2.4px;padding:4px 0;color:var(--muted);white-space:nowrap;
  transition:color .6s var(--ease),letter-spacing .6s var(--ease);
}
.modeToggle button[aria-pressed="true"]{color:var(--fg);}
.modeToggle button:not([aria-pressed="true"]):hover{color:var(--fg);}
.modeToggle sup{font-size:8px;letter-spacing:1px;margin-left:4px;vertical-align:6px;opacity:.6;}
.modeToggle__sep{color:var(--faint);font-size:11px;}
/* holo foil: a pink-silver gradient clipped to the letters, with a bright flare sweeping across */
.foil{position:relative;display:inline-block;}
.modeToggle button[aria-pressed="true"] .foil{
  color:transparent;
  background:
    linear-gradient(100deg, transparent 0 38%, rgba(255,240,250,.95) 47%, #ffffff 50%, rgba(255,240,250,.95) 53%, transparent 62% 100%) 0 0/300% 100% no-repeat,
    linear-gradient(100deg, #8c1f6e 0%, #d2389f 18%, #ff7fcf 34%, #f7bfe2 46%, #e0459f 60%, #ff66c4 76%, #9e2a7c 100%) 0 0/220% 100%;
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 5px rgba(255,80,190,.45)) drop-shadow(0 0 1px rgba(200,30,140,.5));
  animation:foil 3.6s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes foil{
  0%{background-position:130% 0, 0% 0;}
  55%{background-position:-30% 0, 100% 0;}
  100%{background-position:-30% 0, 0% 0;}
}
.emptyNote{position:fixed;inset:auto 0 50% 0;text-align:center;color:var(--muted);font-size:11px;letter-spacing:2px;z-index:5;}

/* ---------- ABOUT dropdown ---------- */
.about{margin:clamp(8px,2vh,20px) auto 0;max-width:520px;}
.about summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  color:var(--muted);font-size:11px;letter-spacing:2px;padding:6px 0;
  transition:color .4s var(--ease);
}
.about summary::-webkit-details-marker{display:none;}
.about summary::after{content:"+";font-size:13px;transition:transform .5s var(--ease);}
.about[open] summary::after{transform:rotate(45deg);}
.about summary:hover{color:var(--fg);}
.about .detail__desc{margin-top:6px;max-height:34vh;overflow:auto;animation:rise .7s var(--ease) both;}

@media (max-width:768px){
  .modeToggle{position:fixed;top:auto;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);}
  .modeToggle button{padding:8px 0;}
}

/* ---------- the song's name by the cursor ---------- */
.hoverTag{
  position:fixed;left:0;top:0;z-index:50;pointer-events:none;
  display:flex;flex-direction:column;gap:3px;
  padding:9px 12px;background:rgba(246,246,244,0.86);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--faint);
  opacity:0;transition:opacity .35s var(--ease);
  white-space:nowrap;
}
.hoverTag.is-shown{opacity:1;}
#hoverTitle{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;}
#hoverArtist{font-size:10px;letter-spacing:1px;color:var(--muted);}

/* ---------- ACCESS (desktop only): barely there, bottom right ---------- */
.accessBtn{
  position:fixed;right:var(--pad);bottom:18px;z-index:40;
  font-size:10px;letter-spacing:3.2px;padding:8px 0;
  color:rgba(17,17,18,0.2);
  opacity:0;pointer-events:none;transition:opacity 1.2s var(--ease) .4s,color .5s var(--ease);
}
body.is-loaded .accessBtn{opacity:1;pointer-events:auto;}
.accessBtn:hover{color:rgba(17,17,18,0.55);}
body.detail-open .accessBtn,body.index-open .accessBtn,body.access-open .accessBtn{opacity:0;pointer-events:none;transition-delay:0s;}
@media (max-width:900px),(hover:none){.accessBtn{display:none;}}

/* the page in pieces, then the single field it collapses into */
.access{position:fixed;inset:0;z-index:900;background:var(--bg);}
.access__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.access__field{
  position:absolute;left:50%;top:50%;
  width:var(--bar-w,480px);height:var(--bar-h,72px);
  transform:translate(-50%,-50%) translateX(var(--shake,0px));
  display:flex;align-items:center;
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease);
}
.access.is-ready .access__field{opacity:1;pointer-events:auto;}
.access__input{
  flex:1;min-width:0;height:100%;padding:0 22px;
  background:none;border:0;outline:none;
  font:inherit;font-size:15px;letter-spacing:6px;color:var(--fg);text-align:center;
  caret-color:var(--fg);
  /* a soft halo keeps what's typed readable over dark pieces */
  text-shadow:0 0 2px var(--bg),0 0 6px var(--bg),0 0 12px var(--bg);
}
.access__go{
  position:absolute;inset:0;width:100%;
  font-size:22px;color:var(--fg);letter-spacing:0;
  text-shadow:0 0 2px var(--bg),0 0 6px var(--bg),0 0 12px var(--bg);
  animation:goPulse 1.8s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes goPulse{0%,100%{opacity:.45;}50%{opacity:1;}}
.access__note{
  position:absolute;left:0;right:0;top:calc(50% + var(--bar-h,72px) / 2 + 22px);
  text-align:center;font-size:10px;letter-spacing:3px;color:var(--muted);
  min-height:1em;
}

/* the private page (its look arrives with its content) */
.hub{position:fixed;inset:0;z-index:895;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);}
.access__go:focus-visible{outline:none;}

/* the headline the dots become, which then settles into the private page's corner as its logo
   (its words arrive with the sealed page; same proportions as that logo, so it lands exactly) */
.flyTitle{
  position:fixed;left:0;top:0;z-index:910;pointer-events:none;transform-origin:0 0;
  font-size:clamp(44px,7.4vw,124px);line-height:1;white-space:nowrap;
  opacity:0;transition:opacity .45s var(--ease);
}
.flyTitle.is-on{opacity:1;}
.flyTitle__layer{display:inline-flex;align-items:center;gap:.42em;transition:opacity 1.15s cubic-bezier(.65,0,.35,1);}
.flyTitle__layer--plain{position:absolute;left:0;top:0;opacity:0;}
.flyTitle.is-settled .flyTitle__layer--foil{opacity:0;}
.flyTitle.is-settled .flyTitle__layer--plain{opacity:1;}
.flyTitle__words{font-family:"hubHead","Barlow Semi Condensed","Arial Narrow",sans-serif;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.flyTitle__mark{
  display:inline-block;height:1.7em;width:calc(1.7em * 800 / 364);
  -webkit-mask:url("../assets/logo-white.png") center/contain no-repeat;mask:url("../assets/logo-white.png") center/contain no-repeat;
}
/* flashy: pink holo foil sweeping across, with a soft glow */
.flyTitle__layer--foil .flyTitle__words,.flyTitle__layer--foil .flyTitle__mark{
  background:
    linear-gradient(100deg,transparent 0 38%,rgba(255,240,250,.95) 47%,#fff 50%,rgba(255,240,250,.95) 53%,transparent 62% 100%) 0 0/300% 100% no-repeat,
    linear-gradient(100deg,#8c1f6e 0%,#d2389f 18%,#ff7fcf 34%,#f7bfe2 46%,#e0459f 60%,#ff66c4 76%,#9e2a7c 100%) 0 0/220% 100%;
  animation:foil 2.4s cubic-bezier(.45,0,.55,1) infinite;
}
.flyTitle__layer--foil .flyTitle__words{-webkit-background-clip:text;background-clip:text;color:transparent;}
.flyTitle__layer--foil{filter:drop-shadow(0 0 18px rgba(255,80,190,.35));}
/* settled: exactly the private page's logo */
.flyTitle__layer--plain .flyTitle__words{color:rgba(17,17,18,.42);}
.flyTitle__layer--plain .flyTitle__mark{background:rgba(17,17,18,.32);}
body.no3d .index__close{display:none;}