/* Visage Recordings — minimal label site
   near-black canvas · off-white ink · one restrained accent · lots of air */

:root{
  --bg:#0c0c0e;
  --panel:#131316;
  --ink:#f2f0ec;
  --muted:#8b8a90;
  --faint:#2a2a30;
  --accent:#c8a15a;            /* muted brass — quiet, not loud */
  --maxw:1080px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
strong{font-weight:600}
em{font-style:italic}

/* ---------- header ---------- */
.site{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding:1.25rem clamp(1.25rem,5vw,3rem);
  background:linear-gradient(180deg,rgba(12,12,14,.96),rgba(12,12,14,.7) 70%,transparent);
  backdrop-filter:blur(6px);
}
.brand{display:flex;align-items:baseline;gap:.55rem}
.brand__name{font-weight:600;letter-spacing:.42em;font-size:1.02rem;padding-left:.42em}
.brand__sub{color:var(--muted);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase}
.nav{display:flex;gap:clamp(1rem,3vw,2.2rem)}
.nav a{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  transition:color .25s var(--ease);
}
.nav a:hover{color:var(--ink)}

/* ---------- layout rhythm ---------- */
main{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem)}
section{padding:clamp(4rem,10vw,8rem) 0;border-top:1px solid var(--faint)}
section:first-child{border-top:0}
.section__label{
  font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
  font-weight:500;margin-bottom:2.4rem;
}

/* ---------- oversized undulating ghost mark ---------- */
:root{--ghost-op:.022}   /* ~1% brighter than the bg; dial up/down to taste */
.ghost{
  position:absolute;left:50%;top:50%;
  width:min(155vmin,1500px);height:auto;z-index:0;
  transform:translate(-50%,-50%);
  opacity:var(--ghost-op);pointer-events:none;user-select:none;
  will-change:transform;animation:undulate 26s ease-in-out infinite}
@keyframes undulate{
  0%  {transform:translate(-50%,-50%) rotate(-5deg) scale(1)}
  50% {transform:translate(-51%,-48%) rotate(4deg)  scale(1.08)}
  100%{transform:translate(-50%,-50%) rotate(-5deg) scale(1)}}

/* ---------- hero ---------- */
.hero{padding-top:clamp(3rem,8vw,6rem);position:relative;overflow:hidden;isolation:isolate}
.hero>*:not(.ghost){position:relative;z-index:1}
.eyebrow{
  font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);
  font-weight:500;margin-bottom:1.6rem;
}
.hero__title{
  font-weight:300;line-height:1.02;letter-spacing:-.02em;
  font-size:clamp(2.6rem,8vw,5.2rem);margin-bottom:1.8rem;
}
.hero__lede{
  max-width:46ch;color:#cdcbc6;font-size:clamp(1.05rem,2.2vw,1.28rem);
  font-weight:300;line-height:1.62;
}
.hero__lede strong{color:var(--ink);font-weight:500}
.coming{
  display:flex;align-items:baseline;gap:.7rem 1rem;flex-wrap:wrap;
  margin-top:2.4rem;max-width:46ch;
  color:var(--muted);font-size:.94rem;font-weight:300;line-height:1.5;
}
.coming__tag{
  flex:none;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:var(--accent);border:1px solid var(--accent);border-radius:100px;
  padding:.32em .8em;opacity:.9;
}
.coming strong{color:var(--ink);font-weight:500}

/* ---------- releases grid ---------- */
.grid{
  list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:clamp(1.4rem,3vw,2.6rem);
}
.rel a{display:block}
.rel__art{
  display:block;position:relative;overflow:hidden;border-radius:2px;
  background:var(--panel);box-shadow:0 1px 0 rgba(255,255,255,.03);
}
.rel__art::after{                       /* subtle top-light + hover veil */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 40%);
  opacity:.7;transition:opacity .4s var(--ease);pointer-events:none;
}
.rel__art img{
  aspect-ratio:1/1;object-fit:cover;width:100%;
  transition:transform .6s var(--ease),filter .6s var(--ease);
  filter:saturate(.96);
}
.rel a:hover .rel__art img{transform:scale(1.045);filter:saturate(1.08)}
.rel a:hover .rel__art::after{opacity:0}
.rel__meta{display:flex;flex-direction:column;gap:.15rem;margin-top:.85rem}
.rel__title{font-weight:500;font-size:.98rem;letter-spacing:.005em}
.rel__artist{color:var(--muted);font-size:.82rem;letter-spacing:.02em}
.rel a:hover .rel__artist{color:var(--accent)}

.releases__more{margin-top:2.8rem}
.link-out{
  font-size:.86rem;letter-spacing:.06em;color:var(--muted);
  border-bottom:1px solid var(--faint);padding-bottom:.2rem;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.link-out:hover{color:var(--ink);border-color:var(--accent)}

/* ---------- about ---------- */
.about__body{max-width:52ch;display:flex;flex-direction:column;gap:1.3rem;
  color:#cdcbc6;font-weight:300;font-size:clamp(1rem,2vw,1.14rem)}
.about__body strong{color:var(--ink)}
.about__body a{
  color:var(--ink);border-bottom:1px solid var(--accent);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.about__body a:hover{color:var(--accent)}

.about__more{margin-top:2.6rem}

/* ---------- bios (about page) ---------- */
.nav a.is-current{color:var(--ink)}
.people-intro{padding-bottom:clamp(2rem,5vw,3.5rem)}
.bio{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);
  gap:clamp(1.4rem,5vw,4rem);
  padding:clamp(3rem,7vw,5.5rem) 0;border-top:1px solid var(--faint);
}
.bio__head{align-self:start}
.portrait{
  display:block;overflow:hidden;border-radius:2px;background:var(--panel);
  margin-bottom:1.3rem;box-shadow:0 1px 0 rgba(255,255,255,.03);
}
.portrait img{
  aspect-ratio:1/1;object-fit:cover;width:100%;
  filter:saturate(.96);transition:transform .6s var(--ease),filter .6s var(--ease);
}
.bio:hover .portrait img{transform:scale(1.03);filter:saturate(1.05)}
.bio__name{font-weight:300;letter-spacing:-.015em;line-height:1.05;
  font-size:clamp(1.9rem,4.4vw,2.9rem)}
.bio__role{margin-top:.7rem;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);font-weight:500}
.bio__body{max-width:60ch}
.backlink{padding:clamp(2.5rem,6vw,4rem) 0;border-top:1px solid var(--faint)}
@media(max-width:720px){
  .bio{grid-template-columns:1fr;gap:1.2rem}
}

/* ---------- contact ---------- */
.contact__line{color:var(--muted);font-size:.9rem;letter-spacing:.04em;margin-bottom:.7rem}
.contact__mail{
  font-weight:300;font-size:clamp(1.5rem,5vw,2.6rem);letter-spacing:-.01em;
  color:var(--ink);border-bottom:1px solid var(--faint);padding-bottom:.15rem;
  transition:border-color .3s var(--ease);
}
.contact__mail:hover{border-color:var(--accent)}
.contact__links{display:flex;gap:1.6rem;margin-top:1.8rem}
.contact__links a{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  transition:color .25s var(--ease);
}
.contact__links a:hover{color:var(--ink)}

/* ---------- footer ---------- */
.foot{
  max-width:var(--maxw);margin:0 auto;
  padding:2.2rem clamp(1.25rem,5vw,3rem);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-top:1px solid var(--faint);
  font-size:.74rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;
}

/* ---------- scroll reveal (progressive enhancement) ---------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .rel__art img{transition:none}
  .ghost{animation:none}
}

@media(max-width:560px){
  .site{flex-direction:column;align-items:flex-start;gap:.6rem}
  .grid{grid-template-columns:repeat(2,1fr)}
}
/* ---------- message / subscribe form ---------- */
.msgform{margin-top:3rem;max-width:520px;display:flex;flex-direction:column;gap:1.1rem}
.msgform__intro{font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);font-weight:500}
.field{display:flex;flex-direction:column;gap:.4rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.msgform input,.msgform textarea{background:var(--panel);border:1px solid var(--faint);border-radius:3px;
  color:var(--ink);font:inherit;font-size:.98rem;padding:.7rem .8rem;width:100%;transition:border-color .25s var(--ease)}
.msgform input:focus,.msgform textarea:focus{outline:none;border-color:var(--accent)}
.msgform textarea{resize:vertical;min-height:110px}
.field-hint{font-size:.78rem;color:var(--muted);margin-top:-.5rem}
.check{display:flex;align-items:center;gap:.6rem;font-size:.9rem;color:#cdcbc6;cursor:pointer}
.check input{width:auto;accent-color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.btn{align-self:flex-start;background:var(--accent);color:#0c0c0e;border:none;border-radius:3px;
  font:inherit;font-weight:600;letter-spacing:.06em;padding:.7rem 1.6rem;cursor:pointer;transition:opacity .2s var(--ease)}
.btn:hover{opacity:.9}
.btn:disabled{opacity:.5;cursor:default}
.msgform__foot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.msgform__status{font-size:.86rem}
.msgform__status.ok{color:#7ec27e}
.msgform__status.err{color:#e0687a}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}

/* ---------- featured release (home) ---------- */
.featured__card{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:clamp(1.5rem,5vw,3rem);align-items:center}
.featured__art{display:block;overflow:hidden;border-radius:2px;background:var(--panel);box-shadow:0 12px 44px rgba(0,0,0,.55)}
.featured__art img{aspect-ratio:1/1;object-fit:cover;width:100%;transition:transform .6s var(--ease)}
.featured__card:hover .featured__art img{transform:scale(1.04)}
.featured__meta{display:flex;flex-direction:column;gap:.45rem}
.featured__title{font-weight:300;font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.01em;line-height:1.05}
.featured__artist{color:var(--muted);font-size:1rem;letter-spacing:.02em}
.featured__cta{margin-top:1rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.featured__card:hover .featured__cta{color:var(--ink)}
.featured__more{margin-top:2.4rem}
@media(max-width:640px){.featured__card{grid-template-columns:1fr;gap:1.3rem;max-width:360px}}

/* ---------- home: all-releases collage backdrop ---------- */
body.home::before{content:"";position:fixed;inset:0;z-index:-2;
  background:url("../img/releases-collage.jpg") center/cover no-repeat;
  filter:saturate(.75) blur(4px);transform:scale(1.03)}
body.home::after{content:"";position:fixed;inset:0;z-index:-1;
  background:linear-gradient(rgba(12,12,14,.9),rgba(12,12,14,.96))}