/* maartenversteeg.nl — zelfde huisstijl en componenten als hear.nl (home.css + styles.css); hier alleen wat de dj-site anders heeft */
.mv-merk{font:300 26px/1 var(--kop);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.top .mv-merk{display:inline-block}
.home .top .mv-merk{visibility:hidden}
.mv-woordmerk{display:block;font:300 clamp(44px,7.4vw,118px)/.95 var(--kop);letter-spacing:.05em;text-transform:uppercase;margin:0 0 26px}
.hero-blok .mv-tagline{font:300 clamp(26px,2.6vw,40px)/1.15 var(--kop);margin:0 0 18px;white-space:normal}
.werk-kaart .label{display:block;margin-top:14px}
/* lijst met alle mixes */
.mix-lijst{list-style:none;margin:0;padding:0 var(--rand) clamp(40px,5vw,72px);background:var(--wit);color:var(--zwart)}
.mix-lijst li{border-top:1px solid #d9d6cf}
.mix-lijst li:last-child{border-bottom:1px solid #d9d6cf}
.mix-lijst a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;align-items:baseline;padding:18px 0;text-decoration:none}
.mix-lijst .label{color:#5d5b56;grid-column:1}
.mix-lijst .titel{grid-column:1;font:300 clamp(22px,2vw,28px)/1.2 var(--kop)}
.mix-lijst .pijl{grid-column:2;grid-row:1/3;align-self:center;font:600 11px/1 var(--tekst);letter-spacing:.18em;text-transform:uppercase;color:var(--koraal);white-space:nowrap}
.mix-lijst a:hover .titel,.mix-lijst a:focus-visible .titel{color:var(--koraal)}
.mix-kop{background:var(--wit);color:var(--zwart);padding:clamp(40px,5vw,72px) var(--rand) 18px;margin:0}
.mix-kop h2{font:300 clamp(26px,2.4vw,34px)/1.1 var(--kop);margin:0}
.mix-noot{background:var(--wit);color:#3a3a37;margin:0;padding:0 var(--rand) clamp(50px,6vw,90px)}
.mix-noot a{color:var(--zwart)}
.news-wanneer{display:inline-block;margin:0 0 6px;padding:10px 14px;border:1px solid var(--koraal);color:var(--zwart);font:600 12px/1.4 var(--tekst);letter-spacing:.12em;text-transform:uppercase}
.voet-merk .mv-merk{font-size:28px;display:inline-block;margin-bottom:14px}
@media (max-width:900px){.mv-merk{font-size:20px}.mv-woordmerk{font-size:clamp(40px,12vw,64px)}}
@media (max-width:900px){.home .hero-bg{object-position:44% 80%!important}}
/* strook: plekken als tekst, niet klikbaar; zelfde kleur als de links op hear.nl */
.strook span.plek{opacity:1}
@media (max-width:760px){.strook .strook-wat span.plek{display:inline;white-space:nowrap}}
/* nieuws: Nederlands met Engelse toggle */
html:not(.taal-en) .t-en,html.taal-en .t-nl{display:none!important}
button.taal{background:transparent;color:inherit;cursor:pointer}
.verwijzingen span{display:contents}
/* nieuwsbeeld: picture vult de kop; op mobiel de staande flyer op volle breedte */
.casehero picture{display:block;height:100%}
@media (max-width:760px){.casehero.passend{height:auto}.casehero.passend picture,.casehero.passend img{height:auto}}
/* mixes: SoundCloud-spelers zoals op hear.nl/dj-mixes */
.mix-home{background:var(--wit);color:var(--zwart);padding:clamp(50px,6vw,90px) var(--rand) clamp(20px,3vw,40px)}
.mix-home .werk-kop{margin-bottom:0}
.mix-home .tekstlink{color:var(--zwart);white-space:nowrap}
.mix-home .mixen{padding-top:24px}
.mix .mix-link{display:block;margin-top:4px;font:600 10.5px/1.4 var(--tekst);letter-spacing:.16em;text-transform:uppercase;color:var(--koraal);text-decoration:none}
@media (max-width:760px){.mix-home .mixen{grid-template-columns:1fr}.mix-home .mix iframe{height:240px}}
/* mix-terugval in de preview (spelers van andere sites laden daar niet) */
.mix-vak{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;height:240px;padding:18px;background:linear-gradient(160deg,#2a2f55,#191A19 70%);color:var(--wit);text-decoration:none;overflow:hidden}
.mix-vak[hidden]{display:none}
.mix-play{position:absolute;top:18px;left:18px;width:46px;height:46px;border-radius:50%;background:var(--koraal);color:var(--zwart);display:grid;place-items:center;font-size:16px;padding-left:3px}
.mix-golf{position:absolute;left:18px;right:18px;top:96px;height:46px;background:repeating-linear-gradient(90deg,rgba(246,245,241,.55) 0 2px,transparent 2px 5px);-webkit-mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);opacity:.6}
.mix-vak-t{font:300 22px/1.15 var(--kop)}
.mix-vak-l{font:600 10.5px/1.4 var(--tekst);letter-spacing:.16em;text-transform:uppercase;color:var(--koraal)}
.mix-vak:hover .mix-vak-t{color:var(--koraal)}
@media (max-width:760px){.mix-vak{height:200px}}
.aanvraag .uitleg{font-size:13px;color:#5d5b56}
.strook span.plek span{opacity:1}
/* SoundCloud-spelers vierkant, zoals op hear.nl/artiesten: de artwork valt dan niet weg */
.mix iframe{aspect-ratio:1/1;height:auto!important}
.mix-vak{aspect-ratio:1/1;height:auto}
@media (max-width:760px){.mixen{grid-template-columns:1fr}.mix iframe{height:auto!important}}

/* nieuwsbericht: kop en datum in het witte vlak, onder de afbeelding */
.nieuwshead{padding-bottom:clamp(20px,2.5vw,32px)}
.artikel-kop{margin:0 0 clamp(20px,2.5vw,32px)}
.artikel-kop .nieuws-datum{margin:0 0 10px;font:600 12px/1.4 var(--tekst);letter-spacing:.12em;text-transform:uppercase;color:var(--tekstgrijs)}
.artikel-kop h1{font:300 clamp(28px,3.2vw,48px)/1.12 var(--kop);max-width:32ch;margin:0;color:var(--zwart);text-wrap:balance}

/* hero desktop: meer breedte en groter corps */
@media (min-width:901px){
  .hero-blok{max-width:min(100%,1180px)}
  .hero-blok .mv-tagline{font-size:clamp(40px,4.4vw,76px);line-height:1.05;margin:0 0 24px;text-wrap:balance}
  .hero .lead{font-size:clamp(20px,1.7vw,27px);max-width:60ch}
  .hero .feiten{font-size:13px}
}

/* logo rechtsboven in de hero */
.mv-logo{display:block;align-self:flex-end;width:clamp(150px,17vw,300px);height:auto;margin:0}
@media (max-width:900px){.mv-logo{width:clamp(130px,38vw,200px)}}

/* logo als homeknop linksboven */
.top .mv-merk-logo{display:inline-flex;align-items:center;line-height:0}
.top .mv-merk-logo::before{display:none}
.top .mv-merk-logo img{width:118px;height:auto}
@media (max-width:900px){.top .mv-merk-logo img{width:92px}}

/* bedankt na boeken: luchtig, zonder kader */
.formmelding.dank-luchtig{border:0;background:none;padding:0;margin:clamp(24px,4vw,48px) 0;font:300 clamp(26px,3vw,44px)/1.2 var(--kop);color:var(--zwart);max-width:30ch}
.formmelding.dank-luchtig a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}

/* mobiel: de drie mixes op de homepage als slider */
@media (max-width:760px){
  .mix-home .mixen{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 calc(-1 * var(--rand));padding-left:var(--rand);padding-right:var(--rand);scroll-padding-left:var(--rand)}
  .mix-home .mixen::-webkit-scrollbar{display:none}
  .mix-home .mixen .mix{flex:0 0 84%;scroll-snap-align:start}
  .mix-home .mix iframe{height:auto!important}
}