:root{color-scheme:dark;--white:#f9f9f9;--bg:#000}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--white);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible{outline:1px solid #fff;outline-offset:8px}.home{min-height:100vh;min-height:100dvh;display:flex;justify-content:center;align-items:center;padding:36px 20px}.home__content{width:min(100%,460px);display:flex;flex-direction:column;align-items:center;transform:translateY(-2%)}.home__logo{display:block;width:min(100%,405px);height:auto}.home__nav{display:flex;justify-content:space-between;align-items:center;gap:30px;width:100%;margin-top:52px;font-size:16px;font-weight:600;letter-spacing:-.025em;text-transform:uppercase}.home__nav a,.site-header a,.contact-row a{transition:opacity .2s ease}.home__nav a:hover,.site-header a:hover,.contact-row a:hover{opacity:.55}.site-header{position:absolute;top:clamp(28px,5.3vh,58px);left:max(34px,calc((100vw - 1450px)/2));z-index:2}.site-header img{display:block;width:clamp(190px,18vw,295px);height:auto}.inner{min-height:100vh;min-height:100dvh;padding:175px 24px 60px;display:flex;align-items:center;justify-content:center}.roster-card{width:min(100%,386px);margin:0}.roster-card img{display:block;width:100%;height:auto;aspect-ratio:1365/2048;object-fit:cover}.roster-caption{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;margin-top:14px;font-size:13px;font-weight:400;line-height:1.5;white-space:nowrap}.contact-row{width:min(100%,390px);display:grid;grid-template-columns:28px 1fr auto;gap:14px;align-items:center;font-size:13px;line-height:1.6}.coming-soon{font-size:13px;letter-spacing:.02em;text-transform:uppercase}@media (min-width:1000px){.inner{padding-top:160px;padding-bottom:54px}}@media(max-width:600px){.home__content{width:min(100%,350px)}.home__logo{width:100%}.home__nav{margin-top:38px;gap:12px;font-size:13px}.site-header{top:28px;left:24px}.site-header img{width:186px}.inner{padding:145px 26px 52px}.roster-card{width:min(100%,330px)}.roster-caption,.contact-row{font-size:11px}.roster-caption{gap:6px;grid-template-columns:23px 1fr auto}.contact-row{grid-template-columns:22px 1fr auto;gap:9px;width:min(100%,350px)}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Roster: smooth photo/biography crossfade; click/tap also toggles the image. */
.roster-photo{appearance:none;display:block;position:relative;width:100%;padding:0;margin:0;border:0;background:#000;cursor:pointer;overflow:hidden;color:inherit;font:inherit;text-align:inherit;aspect-ratio:1365/2048}
.roster-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .65s ease,filter .65s ease,transform .65s ease}
.roster-photo__primary{opacity:1;filter:blur(0)}
.roster-photo .roster-photo__hover{opacity:0;filter:blur(7px)}
.roster-photo:hover .roster-photo__primary,.roster-photo.is-active .roster-photo__primary{opacity:0;filter:blur(7px)}
.roster-photo:hover .roster-photo__hover,.roster-photo.is-active .roster-photo__hover{opacity:1;filter:blur(0)}
.roster-photo:focus-visible{outline:2px solid white;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.roster-photo img{transition:none!important}}

/* Elegant entrance on every page: content fades up without moving the layout. */
@keyframes toneway-enter {from {opacity:0;transform:translate3d(0,15px,0);filter:blur(5px)} to {opacity:1;transform:translate3d(0,0,0);filter:blur(0)}}
.home__content,.inner > *, .site-header {animation:toneway-enter 900ms cubic-bezier(.22,1,.36,1) both}
.site-header {animation-duration:750ms}
.inner > * {animation-delay:110ms}
/* Mobile: entrance animations also run on touch devices, including Safari. */
@media(max-width:600px){
  .home__content,.inner > *,.site-header{
    -webkit-animation-name:toneway-enter;
    animation-name:toneway-enter;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
  }
  .home__content{-webkit-animation-duration:900ms;animation-duration:900ms}
  .site-header{-webkit-animation-duration:750ms;animation-duration:750ms}
  .inner > *{-webkit-animation-duration:900ms;animation-duration:900ms}
}
/* Accessibility: keep a gentle opacity-only reveal when reduced motion is enabled. */
@keyframes toneway-enter-soft {from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .home__content,.inner > *,.site-header{
    animation:toneway-enter-soft 350ms ease-out both!important;
    -webkit-animation:toneway-enter-soft 350ms ease-out both!important;
    transform:none;
    filter:none;
  }
}

/* Releases catalogue: Contact-inspired three-column numbered rows. */
.releases-inner{padding-top:190px;padding-bottom:90px}
.release-list{list-style:none;margin:0;padding:0;width:min(100%,790px);display:flex;flex-direction:column;gap:23px}
.release-row{display:grid;grid-template-columns:28px minmax(135px,190px) minmax(0,1fr);gap:14px;align-items:baseline;font-size:13px;line-height:1.55;font-weight:400}
.release-artist,.release-title{min-width:0;overflow-wrap:break-word}
@media(max-width:600px){.releases-inner{padding-top:155px;padding-bottom:55px}.release-list{gap:18px}.release-row{grid-template-columns:24px minmax(89px,34%) minmax(0,1fr);gap:9px;font-size:11px;line-height:1.55}}

/* Homepage logo: same dimming interaction as subpage logo links. */
.home__logo-link{display:block;width:min(100%,405px);transition:opacity .2s ease}
.home__logo-link .home__logo{width:100%}
.home__logo-link:hover{opacity:.55}
@media(max-width:600px){.home__logo-link{width:100%}}
@media(prefers-reduced-motion:reduce){.home__logo-link{transition:none}}

/* Releases heading aligned with the catalogue, matching its typography. */
.releases-content{width:min(100%,790px)}
.releases-content .release-list{width:100%}
.releases-heading{margin:0 0 30px;font-size:13px;font-weight:400;line-height:1.55;letter-spacing:normal}
@media(max-width:600px){.releases-heading{font-size:11px;margin-bottom:24px}}

/* Contact introduction: centered italic copy, matching the list's typography. */
.contact-content{width:min(100%,690px);display:flex;flex-direction:column;align-items:center;gap:55px}
.contact-intro{width:100%;font-size:13px;font-weight:400;font-style:italic;line-height:1.85;text-align:center}
.contact-intro p{margin:0}
.contact-intro p+p{margin-top:27px}
.contact-content .contact-row{flex-shrink:0}
@media(max-width:600px){.contact-inner{padding-top:165px;padding-bottom:65px}.contact-content{gap:43px}.contact-intro{font-size:11px;line-height:1.85}.contact-intro p+p{margin-top:24px}}