:root{
  --inkt:#1a1816; --papier:#f7f4ef; --lijn:#dcd6cc; --stil:#6b655d;
  --kamer:#2b2926; --kamer-zacht:#e8e3dc;
  --breedte:68rem; --rand:1rem;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--inkt);line-height:1.5;font-size:1.02rem}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{line-height:1.15;margin:0 0 .5rem;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,5vw,3rem)}
h2{font-size:clamp(1.3rem,3.2vw,1.7rem);margin-top:0}
p{margin:0 0 .8rem}
.stil{color:var(--stil);font-size:.92rem}
.eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stil);margin:0 0 .35rem}
.wrap{max-width:var(--breedte);margin:0 auto;padding:0 var(--rand)}
.sectie{padding:2.2rem 0;border-top:1px solid var(--lijn)}
.sectie:first-of-type{border-top:0}
.kop-balk{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem var(--rand);max-width:var(--breedte);margin:0 auto}
.kop-balk .merk{font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;font-size:.95rem}
.kop-balk nav{display:flex;gap:1rem;font-size:.92rem}
.kop-balk nav a{text-decoration:none;color:var(--stil)}
.kop-balk nav a:hover{color:var(--inkt)}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.7rem 1.2rem;border:1.5px solid var(--inkt);border-radius:999px;text-decoration:none;font-weight:600;background:transparent;color:var(--inkt);cursor:pointer;font-size:1rem;line-height:1.2}
.knop:hover{background:var(--kamer-zacht)}
.knop.primair{background:var(--kamer);border-color:var(--kamer);color:#fff}
.knop.primair:hover{filter:brightness(1.08)}
.knop.groot{width:100%;min-height:3.6rem;font-size:1.1rem}
.knop.klein{min-height:2.4rem;padding:.4rem .9rem;font-size:.9rem}
.rij{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.rooster{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr))}
.tegel{display:block;text-decoration:none;border:1px solid var(--lijn);border-radius:.6rem;padding:1rem;background:#fff;border-top:5px solid var(--kamer)}
.tegel b{display:block;font-size:1.05rem}
.tegel small{color:var(--stil)}
.tegel:hover{border-color:var(--kamer)}
.hoes{aspect-ratio:1;width:100%;object-fit:cover;border-radius:.5rem;background:var(--kamer-zacht)}
.initiaal{aspect-ratio:1;width:100%;border-radius:.5rem;background:var(--kamer);color:#fff;display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:800}
.concept{display:inline-block;background:#fff3c4;border:1px solid #e3c86a;color:#5a4600;border-radius:.4rem;padding:.2rem .6rem;font-size:.8rem;margin-bottom:.8rem}
.kamer-kop{background:var(--kamer-zacht);padding:2rem 0}
.kamer-kop .binnen{display:grid;gap:1.4rem;grid-template-columns:1fr;align-items:center}
.kamer-kop .logo{width:5.5rem;height:5.5rem;object-fit:contain;margin-bottom:.6rem}
.kamer-kop .portret{width:100%;max-width:22rem;aspect-ratio:1;object-fit:cover;border-radius:.8rem}
@media(min-width:48rem){.kamer-kop .binnen{grid-template-columns:minmax(0,1fr) 20rem}}
.release{display:grid;grid-template-columns:4.5rem 1fr auto;gap:1rem;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--lijn)}
.release img{width:4.5rem;height:4.5rem;object-fit:cover;border-radius:.4rem;background:var(--kamer-zacht)}
.release:last-child{border-bottom:0}
@media(max-width:30rem){.release{grid-template-columns:4.5rem 1fr}.release .rij{grid-column:1/-1}}
.pers-rooster{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr))}
.pers-rooster a{display:block}
.pers-rooster img{aspect-ratio:1;object-fit:cover;border-radius:.4rem}
.socials{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.6rem}
.socials a{text-decoration:none;border:1px solid var(--lijn);border-radius:999px;padding:.4rem .9rem;background:#fff}
.producten{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr))}
.product{display:block;text-decoration:none;border:1px solid var(--lijn);border-radius:.6rem;overflow:hidden;background:#fff}
.product img{aspect-ratio:1;object-fit:cover;width:100%}
.product div{padding:.6rem .8rem}
.product b{display:block;font-size:.95rem}
form.aanmelden{display:grid;gap:.6rem;max-width:28rem}
form.aanmelden label{font-size:.9rem;color:var(--stil)}
form.aanmelden input[type=email]{min-height:3rem;padding:.6rem .9rem;border:1.5px solid var(--lijn);border-radius:.5rem;font-size:1rem;background:#fff;width:100%}
form.aanmelden input[type=email]:focus{outline:2px solid var(--kamer);border-color:var(--kamer)}
form.aanmelden .valstrik{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form.aanmelden .status{min-height:1.4rem;font-size:.95rem}
form.aanmelden .status.goed{color:#1e6b3a}
form.aanmelden .status.fout{color:#9b2d1f}
.voet{border-top:1px solid var(--lijn);padding:1.6rem var(--rand);text-align:center;color:var(--stil);font-size:.88rem}
.voet a{color:inherit}
/* playlistpagina: smal, geen menu, alles onder elkaar */
body.playlist{background:#111;color:#f3f1ec;--lijn:#2c2c2c;--stil:#a9a39a;--papier:#111}
body.playlist .wrap{max-width:30rem;padding:1.4rem var(--rand) 2rem}
body.playlist .pl-kop{text-align:center;margin-bottom:1.2rem}
body.playlist .pl-kop .hoes,body.playlist .pl-kop .initiaal{max-width:16rem;margin:0 auto 1rem}
body.playlist .pl-kop .merk{font-weight:800;letter-spacing:.2em;font-size:1.3rem}
body.playlist .pl-kop .merk small{display:block;font-size:.62rem;letter-spacing:.24em;color:var(--stil);font-weight:500}
body.playlist .knop{border-color:#f3f1ec;color:#f3f1ec}
body.playlist .knop:hover{background:#222}
body.playlist .knop.primair{background:#1db954;border-color:#1db954;color:#06130a}
body.playlist .knop.primair:hover{filter:brightness(1.05)}
body.playlist .rij.half .knop{flex:1}
body.playlist .blok{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--lijn)}
body.playlist #artiestblok{border:1px solid var(--kamer);border-left:5px solid var(--kamer);border-radius:.6rem;padding:1rem;margin-top:1.4rem;background:#171717}
body.playlist #artiestblok h2{font-size:1.15rem}
body.playlist form.aanmelden input[type=email]{background:#1c1c1c;color:#f3f1ec;border-color:#333}
body.playlist .tegel{background:#171717;border-color:#2c2c2c;color:#f3f1ec}
body.playlist .tegel:hover{border-color:#f3f1ec}
body.playlist .voet{border-top-color:#2c2c2c}