/* Root scales with the viewport and everything else is in rem, so the whole site
   rescales from these three numbers. */
html{font-size:16px}
@media (min-width:1681px){html{font-size:21.3333px}}
@media (max-width:980px){html{font-size:13.3333px}}

:root{
  --bg:oklch(0.14 0.008 265);
  --bg-raised:oklch(0.19 0.008 265);
  --line:oklch(0.32 0.006 265);
  --fg:oklch(0.97 0.004 265);
  --fg-muted:oklch(0.72 0.006 265);
  --fg-faint:oklch(0.55 0.006 265);
  --on-invert:oklch(0.14 0.008 265);
  --ease:cubic-bezier(0.22,1,0.36,1);
  --grain:url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20height%3D%22512%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cfilter%20id%3D%22noise%22%3E%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.875%22%20result%3D%22noise%22%20%2F%3E%20%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.5%200%22%20%2F%3E%20%3C%2Ffilter%3E%20%3Crect%20filter%3D%22url(%23noise)%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22512%22%20height%3D%22512%22%20fill%3D%22transparent%22%20opacity%3D%221%22%20%2F%3E%3C%2Fsvg%3E");
  --col:68rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font:300 1rem/1.65 Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:-.025rem;
  color:var(--fg);
  background:var(--bg);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}

/* The pinned backdrop is part of the identity: the page scrolls over a still image. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background:
    radial-gradient(70% 70%,oklch(0.14 0.008 265/.55) 0%,oklch(0.11 0.008 265/.8) 100%),
    url(hero.webp) 50% 40%/cover no-repeat;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background:var(--grain) repeat;
  background-size:512px auto;
  opacity:.5;
  pointer-events:none;
}
.wrap{position:relative;z-index:1}
/* The pinned photo carries the first screen; below it the page moves onto an
   opaque surface so nothing is read against moving imagery. */
.surface{background:linear-gradient(oklch(0.14 0.008 265/0) 0,var(--bg) 7rem,var(--bg) 100%)}

/* ---- nav ---------------------------------------------------------------- */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:1.1rem clamp(1.25rem,4vw,2.75rem);
  background:linear-gradient(oklch(0.11 0.008 265/.75),transparent);
}
.nav-mark{display:flex;align-items:center}
.nav-mark img{width:1.15rem}
.nav ul{display:flex;gap:1.6rem;flex-wrap:wrap;justify-content:flex-end}
.nav ul a{
  font-size:.6875rem;font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-muted);
  transition:color .3s var(--ease);
}
.nav ul a:hover{color:var(--fg)}
@media (max-width:640px){
  .nav ul{gap:1rem}
  .nav ul a{font-size:.625rem;letter-spacing:.12em}
}

/* ---- section scaffold --------------------------------------------------- */
.sec{max-width:var(--col);margin:0 auto;padding:clamp(3.5rem,9vw,6rem) clamp(1.25rem,4vw,2.75rem)}
.sec + .sec{padding-top:0}
.kicker{
  display:flex;align-items:baseline;gap:1rem;
  margin:0 0 1.75rem;
  border-bottom:1px solid var(--line);
  padding-bottom:.7rem;
}
.kicker h2{
  margin:0;font-size:.6875rem;font-weight:400;letter-spacing:.26em;
  text-transform:uppercase;color:var(--fg-faint);
}
.kicker .more{
  margin-left:auto;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);transition:color .3s var(--ease);
}
.kicker .more:hover{color:var(--fg)}

/* ---- hero: the arrival moment ------------------------------------------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:7rem clamp(1.25rem,4vw,2.75rem) 5rem;
}
/* The backdrop is brightest exactly where the hero copy sits, so the hero carries
   its own scrim. Text never sits on raw photography. */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(62% 52% at 50% 46%,
    oklch(0.10 0.008 265/.78) 0%,
    oklch(0.10 0.008 265/.45) 62%,
    oklch(0.10 0.008 265/0) 100%);
  pointer-events:none;
}
.hero > *{position:relative;z-index:1}
.hero .mark{width:5rem;margin:0 auto 1.6rem}
.hero h1{
  margin:0 0 1.1rem;
  font-size:clamp(2.37rem,8vw,4.2rem);
  font-weight:700;
  line-height:1;
  letter-spacing:.3em;
  text-indent:.3em;
}
.hero .strap{
  margin:0 auto 2.2rem;
  max-width:36ch;
  font-size:.875rem;
  font-weight:300;
  color:var(--fg-muted);
}
.hero .cue{
  position:absolute;
  left:50%;
  bottom:2.25rem;
  transform:translateX(-50%);
  display:grid;
  place-items:center;
  width:44px;height:44px;
  color:var(--fg-faint);
  transition:color .3s var(--ease),transform .3s var(--ease);
}
.hero .cue:hover{color:var(--fg);transform:translateX(-50%) translateY(3px)}
.hero .cue svg{width:1.4rem;height:1.4rem;fill:currentColor}

/* ---- latest: the whole point of the page -------------------------------- */
.latest{padding-top:clamp(3.5rem,9vw,6rem)}
.feature{display:grid;gap:clamp(1.5rem,4vw,2.75rem)}
@media (min-width:860px){.feature{grid-template-columns:20rem 1fr;align-items:start}}
.feature .art{
  position:relative;display:block;overflow:hidden;
  border-radius:.25rem;background:var(--bg-raised);
  box-shadow:0 1.5rem 4rem oklch(0.05 0 0/.55);
}
.feature .art img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .6s var(--ease)}
.feature .art:hover img{transform:scale(1.03)}
.feature .track{
  margin:0;
  font-size:clamp(2.37rem,7vw,3.16rem);
  font-weight:700;line-height:1.02;letter-spacing:-.03em;
}
.feature .by{margin:.6rem 0 0;font-size:1rem;font-weight:300;color:var(--fg-muted)}
.feature .tag{
  display:inline-block;margin:0 0 1.1rem;
  font-size:.6875rem;font-weight:400;letter-spacing:.26em;text-transform:uppercase;
  color:var(--fg-faint);
}
.player{margin:1.75rem 0 1.5rem;border-radius:.25rem;overflow:hidden;background:var(--bg-raised);min-height:7.5rem}
.player iframe{display:block;width:100%;height:7.5rem;border:0}
.routes{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}

/* Emphasis is inversion, not a hue: a knocked-out block, the way print does it. */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  height:2.6rem;min-height:44px;padding:0 1.15rem;border-radius:2rem;
  background:var(--fg);color:var(--on-invert);
  font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.btn svg{width:1rem;height:1rem;fill:currentColor}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{
  background:transparent;color:var(--fg);
  border:1px solid var(--line);font-weight:400;
}
.btn.ghost:hover{border-color:var(--fg)}

/* ---- release rows ------------------------------------------------------- */
.rows li + li{border-top:1px solid var(--line)}
.rows a{
  display:flex;align-items:center;gap:1rem;
  padding:.8rem .5rem;margin:0 -.5rem;border-radius:.25rem;
  transition:background .3s var(--ease);
}
.rows a:hover{background:var(--bg-raised)}
.rows .thumb{flex:none;width:3.25rem;height:3.25rem;border-radius:.2rem;overflow:hidden;background:var(--bg-raised)}
.rows .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.rows a:hover .thumb img{transform:scale(1.07)}
.rows .t{font-size:.9375rem;font-weight:400;letter-spacing:0;line-height:1.3}
.rows .s{font-size:.75rem;font-weight:300;letter-spacing:0;color:var(--fg-muted);line-height:1.4}

/* ---- about -------------------------------------------------------------- */
.about{display:grid;gap:clamp(1.5rem,4vw,3rem)}
@media (min-width:860px){.about{grid-template-columns:1fr 18rem;align-items:start}}
.about p{margin:0 0 1.1rem;max-width:70ch;font-size:.9375rem;line-height:1.75;color:var(--fg-muted)}
.about p:last-child{margin-bottom:0}
.about .por{overflow:hidden;border-radius:.25rem;background:var(--bg-raised)}
.about .por img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .6s var(--ease)}
.about .por:hover img{transform:scale(1.04)}

/* ---- merch -------------------------------------------------------------- */
.shop{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.75rem}
.shop .frame{overflow:hidden;border-radius:.25rem;background:oklch(0.97 0.004 265)}
.shop img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .5s var(--ease)}
.shop a:hover img{transform:scale(1.04)}
.shop .n{display:block;padding-top:.5rem;font-size:.6875rem;letter-spacing:.06em;color:var(--fg-muted)}

/* ---- contact + footer --------------------------------------------------- */
.contact p{margin:0 0 1.5rem;max-width:46ch;font-size:.9375rem;color:var(--fg-muted)}
.foot{
  max-width:var(--col);margin:0 auto;
  padding:2.5rem clamp(1.25rem,4vw,2.75rem) 3rem;
  border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.social{display:flex;gap:.4rem}
.social a{display:grid;place-items:center;min-width:44px;min-height:44px;margin:-.5rem;color:var(--fg-muted);transition:color .3s var(--ease),transform .3s var(--ease)}
.social a:hover{color:var(--fg);transform:translateY(-2px)}
.social svg{width:1.15rem;height:1.15rem;fill:currentColor;display:block}
.foot small{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}

/* ---- motion ------------------------------------------------------------- */
html.js .reveal{opacity:0;transform:translateY(1.25rem);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
html.js .stagger > *{opacity:0;transform:translateY(1rem);transition:opacity .8s var(--ease) var(--d,0ms),transform .8s var(--ease) var(--d,0ms)}
html.js .stagger.in > *{opacity:1;transform:none}
html.js .stagger > *:nth-child(1){--d:0ms}
html.js .stagger > *:nth-child(2){--d:70ms}
html.js .stagger > *:nth-child(3){--d:140ms}
html.js .stagger > *:nth-child(4){--d:210ms}
html.js .stagger > *:nth-child(5){--d:280ms}
html.js .stagger > *:nth-child(6){--d:350ms}
html.js .stagger > *:nth-child(7){--d:420ms}

a:focus-visible,iframe:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:.2rem}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  html.js .reveal,html.js .stagger > *{opacity:1;transform:none}
}

/* ---- releases page ------------------------------------------------------ */
.page-head{padding-top:clamp(6.5rem,16vh,9rem);padding-bottom:1rem}
/* The surface gradient already separates the head from the first group, so the
   section does not pay for the gap twice. */
.surface > .sec:first-child{padding-top:clamp(2rem,5vw,3rem)}
.page-head h1{
  margin:0;
  font-size:clamp(2.37rem,7vw,3.16rem);
  font-weight:700;line-height:1;letter-spacing:.24em;text-indent:.24em;
  text-transform:uppercase;
}
.group + .group{margin-top:clamp(2.5rem,6vw,4rem)}

/* ---- discography -------------------------------------------------------- */
.kicker .count{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.kicker .count + .more,.kicker .count{margin-left:auto}


/* ---- most played -------------------------------------------------------- */
/* The top-tracks widget is the best-of, ranked on plays rather than curated,
   so it never needs maintaining and rebalances as new work lands. */
.played{margin-top:clamp(2.5rem,6vw,4rem)}
/* Iframes default to 300px wide, so the width has to be stated, not inherited. */
.embed{border-radius:.75rem;overflow:hidden}
.embed iframe{display:block;width:100%;border:0}
.played .embed{margin:0}
.played .embed iframe{height:23rem}

/* ---- chevrons ----------------------------------------------------------- */
/* Drawn in CSS so there is no glyph to go missing and nothing to load. */
.go{
  margin-left:auto;
  flex:none;
  width:.42rem;height:.42rem;
  border-right:1.5px solid var(--fg-faint);
  border-bottom:1.5px solid var(--fg-faint);
  transform:rotate(-45deg);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.rows a:hover .go{border-color:var(--fg);transform:rotate(-45deg) translate(2px,2px)}
.more{display:inline-flex;align-items:center;gap:.5rem}
.more::after{
  content:"";
  width:.36rem;height:.36rem;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);
}

/* ---- discography layout ------------------------------------------------- */
.disco{display:grid;gap:clamp(2rem,5vw,3.5rem)}
@media (min-width:1024px){.disco{grid-template-columns:1fr 7rem}}
.rows .meta{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.free{
  display:inline-block;
  margin-left:.6rem;
  padding:.1rem .4rem;
  border:1px solid var(--line);
  border-radius:.2rem;
  font-size:.5625rem;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fg-muted);
  vertical-align:.1em;
  white-space:nowrap;
}
.rows a:hover .free{border-color:var(--fg-muted);color:var(--fg)}

/* Year rail: jump to any year without scrolling the whole catalogue. */
.yearnav{display:none}
@media (min-width:1024px){
  .yearnav{display:block;position:sticky;top:5.5rem;align-self:start}
  .yearnav h2{
    margin:0 0 .75rem;font-size:.6875rem;font-weight:400;letter-spacing:.2em;
    text-transform:uppercase;color:var(--fg-faint);
  }
  .yearnav ul{display:flex;flex-direction:column;gap:.1rem}
  .yearnav a{
    display:block;padding:.2rem 0;
    font-size:.8125rem;font-weight:300;letter-spacing:.02em;
    color:var(--fg-faint);
    transition:color .25s var(--ease);
  }
  .yearnav a:hover{color:var(--fg)}
  .yearnav a.on{color:var(--fg);font-weight:400}
}