/* Layout: a label's catalogue wall. A sticky bar, a hero with the cover-art wall of the label's four sounds, then About, Sound and Contact as wide editorial bands. Dark first, light for visitors on a light system. */
:root{
  --bg:#0c0c0e; --raise:#16161a; --fg:#f2f0ea; --muted:#a3a19b; --line:#2a2a30; --gold:#ff3b33; --on-gold:#ffffff; --shadow:#00000066; --shadow-up:#00000088;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --pad:max(16px,env(safe-area-inset-left,0px));
  --pad-r:max(16px,env(safe-area-inset-right,0px));
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#f3f2ee; --raise:#ffffff; --fg:#111114; --muted:#5d5c58; --line:#d9d7d0; --gold:#d4110d; --on-gold:#ffffff; --shadow:#3a2a1a26; --shadow-up:#3a2a1a40; color-scheme:light}}
:root[data-theme="light"]{--bg:#f3f2ee; --raise:#ffffff; --fg:#111114; --muted:#5d5c58; --line:#d9d7d0; --gold:#d4110d; --on-gold:#ffffff; --shadow:#3a2a1a26; --shadow-up:#3a2a1a40; color-scheme:light}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.vi [data-l="en"],html:not(.vi) [data-l="vi"]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.6 var(--body);overflow-x:clip}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad-r)}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;z-index:50;background:var(--gold);color:var(--on-gold);padding:8px 12px}
.eyebrow{font:500 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 20px}
.eyebrow b{color:var(--gold);font-weight:500}

/* Top bar */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:24px;height:76px}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{display:block;height:54px;width:auto}
.lg-dark{display:none!important}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .lg-white{display:none!important}:root:not([data-theme="dark"]) .lg-dark{display:block!important}}
:root[data-theme="light"] .lg-white{display:none!important}:root[data-theme="light"] .lg-dark{display:block!important}
.menu{display:flex;gap:28px;margin-left:auto;font-size:15px}
.menu a{text-decoration:none;color:var(--muted)}
.menu a:hover{color:var(--fg)}
.lang{font:500 12px/1 var(--mono);letter-spacing:.1em;background:none;border:1px solid var(--line);color:var(--muted);padding:9px 11px;border-radius:999px;cursor:pointer}
.lang b{color:var(--fg);font-weight:500}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:72px;align-items:center;padding-block:80px 72px}
h1{font:800 clamp(40px,5.2vw,78px)/.98 var(--display);font-stretch:112%;letter-spacing:-.03em;margin:0 0 28px;text-wrap:balance;overflow-wrap:break-word}
h1 em{font-style:normal;color:var(--gold)}
.lead{font-size:clamp(18px,1.6vw,20px);color:var(--muted);max-width:32em;margin:0 0 32px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--body);padding:15px 22px;border-radius:999px;text-decoration:none;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;transition:background .2s,border-color .2s}
.btn:hover{border-color:var(--fg)}
.btn.main{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.btn.main:hover{filter:brightness(1.06)}
.wall{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wall .cover:nth-child(2n){--ty:40px}

/* Cover art: drawn with CSS only, one sleeve per sound */
.cover{margin:0;position:relative;aspect-ratio:1;max-width:100%;border-radius:6px;overflow:hidden;box-shadow:0 18px 40px var(--shadow);isolation:isolate;transform:perspective(900px) translateY(var(--ty,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1));transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s}
.cover::before,.cover::after{content:"";position:absolute;z-index:-1}
.cover figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:8px;padding:14px;font:500 11px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.cover figcaption b{font:800 clamp(16px,2vw,22px)/1 var(--display);font-stretch:110%;letter-spacing:-.01em;text-transform:none}
.cover figcaption{background:linear-gradient(transparent,#0000002e)}
.cover figcaption b{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.art{background-size:cover;background-position:center}
.jazz{background-image:url(cover-jazz.svg);color:#fbe6c0}
.dark{background-image:url(cover-dark.svg);color:#f1e6e8;box-shadow:0 18px 40px var(--shadow),inset 0 0 0 1px #ffffff1f}
.lofi{background-image:url(cover-lofi.svg);color:#fff4e8}
.piano{background-image:url(cover-piano.svg);color:#1b1a20}
.piano figcaption{background:linear-gradient(transparent,#ffffff40)}


/* Bands */
section[id]{scroll-margin-top:84px}
.hero + .band{border-top:1px solid var(--line)}
.band{padding-block:104px;border-bottom:1px solid var(--line)}
h2{font:800 clamp(34px,5vw,68px)/.98 var(--display);font-stretch:114%;letter-spacing:-.03em;margin:0 0 28px;text-wrap:balance;max-width:16em}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
.split p{margin:0 0 18px;color:var(--muted);max-width:34em}
.split p strong{color:var(--fg);font-weight:600}
.steps{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.steps li{padding:28px 28px 0 0}
.steps li+li{padding-left:28px;border-left:1px solid var(--line)}
.steps .n{font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--gold);display:block;margin-bottom:18px}
.steps h3{font:700 22px/1.2 var(--display);font-stretch:110%;margin:0 0 8px}
.steps p{margin:0;color:var(--muted)}

.sounds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:48px}
.sound h3{font:700 22px/1.2 var(--display);font-stretch:110%;margin:18px 0 6px}
.sound p{margin:0;color:var(--muted);font-size:16px}
.roster{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:40px 24px}
.roster li{text-align:center;min-width:0}
.roster img{display:block;width:100%;max-width:176px;height:auto;aspect-ratio:1;margin:0 auto 16px;border-radius:50%;box-shadow:0 0 0 1px var(--line),0 12px 28px var(--shadow)}
.roster b{display:block;font:700 clamp(17px,1.8vw,22px)/1.2 var(--display);font-stretch:110%;overflow-wrap:anywhere}
/* Company register */
.reg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:56px;align-items:start}
.reg dl{margin:0;border-top:1px solid var(--line)}
.reg .row{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:24px;padding-block:18px;border-bottom:1px solid var(--line)}
.reg dt{font:500 12px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.reg dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.reg dd small{display:block;color:var(--muted);font-weight:400;font-size:15px;margin-top:4px}
.reg .tax{font:500 18px/1.4 var(--mono);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.reg .ok{display:inline-flex;align-items:center;gap:8px}
.reg .ok::before{content:"";width:8px;height:8px;border-radius:50%;background:#30a46c}
@media (max-width:960px){.reg{grid-template-columns:1fr;gap:16px}}
@media (max-width:640px){.reg .row{grid-template-columns:1fr;gap:4px}}

/* Contact */
.contact h2{max-width:none}
.mail{display:block;font:800 clamp(26px,5.6vw,76px)/1.05 var(--display);font-stretch:108%;letter-spacing:-.03em;color:var(--gold);text-decoration:none;overflow-wrap:anywhere;margin:8px 0 28px}
.mail:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}
.contact .note{color:var(--muted);max-width:36em;margin:0 0 28px}
#copied{font:500 13px/1 var(--mono);color:var(--muted);margin-left:8px}

/* Footer */
footer{padding-block:56px 40px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.foot .name{margin:0}
.foot .name img{display:block;height:clamp(84px,11vw,140px);width:auto}
.foot nav{display:flex;flex-wrap:wrap;gap:22px;font-size:15px}
.foot nav a{color:var(--muted);text-decoration:none}
.foot nav a:hover{color:var(--fg)}
.legal nav{display:flex;flex-wrap:wrap;gap:22px}
.legal a{color:var(--muted);text-decoration:none}
.legal a:hover{color:var(--fg)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}

@media (max-width:960px){
  .hero{grid-template-columns:1fr;gap:48px;padding-block:48px 72px}
  .wall{max-width:520px}
  .sounds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .roster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .formats,.split{grid-template-columns:1fr;gap:24px}
  .band{padding-block:80px}
}
@media (max-width:640px){
  .cover figcaption{padding:10px}
  .cover figcaption b{font-size:15px}
  .cover figcaption span{display:none}
  .roster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .menu{display:none}
  .lang{margin-left:auto}
  .wall{gap:12px}.wall .cover:nth-child(2n){--ty:24px}
  .steps{grid-template-columns:1fr}
  .steps li,.steps li+li{padding:24px 0;border-left:0;border-bottom:1px solid var(--line)}
  .sounds{gap:24px 14px}
  .format{padding:28px}
  .band{padding-block:64px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

[hidden]{display:none!important}
.menu-toggle{display:none}
#top{scroll-margin-top:100px}
.cover figcaption b{white-space:normal;overflow:visible;text-overflow:clip}
.cover figcaption span[data-l]{display:inline}
.cover figcaption>span{flex-shrink:0}
#company h2{font-size:clamp(30px,3.5vw,46px);line-height:1.1}
.roster img{object-fit:cover}
#copied{align-self:center;line-height:1.5}
.release-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.release-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px}
.release-card h3{margin:16px 0 4px}.release-card p{color:var(--muted);margin:0 0 16px}
.release-links{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:640px){
 .top .wrap{gap:12px;height:72px;position:relative}
 .menu-toggle{display:block;margin-left:auto;background:none;color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:12px;font:inherit;font-size:14px;cursor:pointer}
 .lang{margin-left:0;min-height:44px}
 .menu.is-open{display:flex;position:absolute;top:72px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);padding:16px;flex-direction:column;gap:0;box-shadow:0 16px 24px var(--shadow)}
 .menu a{padding:12px}
 .cover figcaption span[data-l]{display:inline}
 .cover figcaption b{font-size:clamp(13px,3.5vw,18px)}
 .hero{padding-top:36px;gap:28px}
 h1{font-size:clamp(36px,9.8vw,58px);line-height:1.05}
 h2{line-height:1.1}
 .release-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* Footer separation: warm grey in light mode, lifted charcoal in dark mode. */
footer{background:#171719;--line:#343438}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) footer{background:#e7e4dd;--line:#ccc8bf}}
:root[data-theme="light"] footer{background:#e7e4dd;--line:#ccc8bf}