*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#020912;color:#fff;font-family:Arial,sans-serif}a{color:inherit;text-decoration:none}header{height:72px;display:flex;align-items:center;padding:0 5vw;background:#020812;position:sticky;top:0;z-index:20;border-bottom:1px solid #172333}.brand{width:240px;line-height:.8}.brand b{font-size:38px;letter-spacing:1px}.brand i{display:block;color:#ff9d00;font:italic 31px Georgia;margin-left:54px}nav{display:flex;gap:28px;font-size:12px;font-weight:800;flex:1;justify-content:center}nav a:hover{color:#ffa313}.social{display:flex;gap:10px}.social a{border:1px solid #fff;border-radius:50%;width:32px;height:32px;display:grid;place-items:center}.hero{height:430px;background-size:cover;background-position:center 35%;position:relative;border-bottom:1px solid #f5a000}.hero-name{position:absolute;left:5vw;top:55px;text-shadow:0 3px 14px #000}.hero-name span{display:block;font-size:92px;font-weight:1000;letter-spacing:2px}.hero-name em{display:block;color:#ff9d00;font:italic 70px Georgia;margin-top:-18px;margin-left:35px}.latest{min-height:285px;position:relative;display:grid;grid-template-columns:290px 1fr;padding:20px 6vw;overflow:hidden;border-bottom:1px solid #ad6a00}.cover{width:260px;height:260px;object-fit:cover;z-index:2;border:1px solid #999}.latest-copy{z-index:2;padding:15px 0}.latest-copy small,.music-card small{color:#ffa313;font-weight:900;letter-spacing:2px}.latest h1{font:700 58px Georgia;margin:8px 0}.latest p{font-size:18px;max-width:480px;line-height:1.45}.latest-bg{position:absolute;inset:0 0 0 48%;background-size:cover;background-position:center;opacity:.55}.buttons{display:flex;gap:14px;margin-top:20px}.buttons a{padding:15px 22px;border-radius:30px;font-weight:900}.spotify{background:#1ed760;color:#041208}.youtube{background:#ff2433}.section{padding:34px 6vw;border-bottom:1px solid #ad6a00}.section h2{font:700 46px Georgia;margin:0 0 24px}.section h2 i{color:#ff9d00}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.music-card{text-align:center}.music-card img,.placeholder{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid #637083;border-radius:3px}.placeholder{display:grid;place-items:center;background:radial-gradient(circle at 70% 30%,#15457d,#040b14 55%);font-size:36px;font-weight:1000}.placeholder i{color:#ff9d00}.music-card h3{margin:10px 0 5px}.gigs article{background:#07111e;border:1px solid #26384d;padding:20px;display:flex;flex-direction:column;gap:5px}.muted{color:#aeb9c6}.video{display:grid;grid-template-columns:300px 1fr;gap:40px}.video p,.over p{line-height:1.55;color:#d7dde5}.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.video-grid a{display:flex;flex-direction:column;gap:5px}.thumb,.video-empty{min-height:125px;border:1px solid #637083;background:linear-gradient(135deg,#0d2036,#17202b);display:grid;place-items:center;font-size:36px}.video-empty{grid-column:1/-1;font-size:16px;color:#aeb9c6}.over p{max-width:800px}footer{padding:28px 6vw;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;background:#020812}footer div{display:flex;flex-direction:column;gap:5px}footer span{font-size:10px;color:#aeb9c6;letter-spacing:1px}
@media(max-width:850px){header{height:auto;padding:14px 5vw;flex-wrap:wrap}.brand{width:auto;flex:1}.brand b{font-size:30px}.brand i{font-size:24px;margin-left:40px}nav{order:3;width:100%;overflow:auto;justify-content:flex-start;padding-top:14px;gap:18px}.hero{height:360px;background-position:center}.hero-name span{font-size:60px}.hero-name em{font-size:48px}.latest{grid-template-columns:130px 1fr;padding:18px}.cover{width:120px;height:120px}.latest h1{font-size:38px}.latest-bg{display:none}.buttons{flex-direction:column}.cards{grid-template-columns:repeat(2,1fr)}.video{grid-template-columns:1fr}.video-grid{grid-template-columns:1fr}.section h2{font-size:38px}footer{grid-template-columns:1fr}.social{display:flex}}

/* Exact Rieks Schuring logo from the supplied artist card */
.brand{width:240px;line-height:1}
.brand img{display:block;width:155px;height:auto}
.hero-name{position:absolute;left:5vw;top:42px;text-shadow:none}
.hero-name img{display:block;width:min(46vw,520px);height:auto;filter:drop-shadow(0 3px 8px rgba(0,0,0,.6))}
@media(max-width:850px){
 .brand img{width:125px}
 .hero-name{top:42px}
 .hero-name img{width:min(72vw,360px)}
}


/* Aanvulling v3: aparte pagina's en compacte homepage */
.more-link{display:inline-block;margin-top:18px;font-weight:800;text-decoration:none}
.subpage{padding-top:90px;min-height:70vh}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.photo-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.photo-grid figure{margin:0}.photo-grid figcaption{padding:6px 2px;opacity:.8}
.video-grid img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.over img{max-width:340px;width:100%;border-radius:14px;margin:0 24px 18px 0;float:left}
.gig-card{padding:18px}
@media(max-width:800px){.photo-grid{grid-template-columns:repeat(2,1fr)}.over img{float:none;margin:0 0 18px}}
@media(max-width:520px){.photo-grid{grid-template-columns:1fr}}



/* Mobiele optimalisatie - desktop blijft ongewijzigd */
@media(max-width:850px){
  /* Het kleine logo in de bovenbalk blijft; het grote logo over de foto verdwijnt. */
  .hero-name{display:none}

  /* Houd het gezicht beter in beeld op een smal scherm. */
  .hero{
    height:420px;
    background-position:center 28%;
  }

  /* Bovenbalk compacter en menu horizontaal veegbaar, zonder de foto te bedekken. */
  header{padding:10px 4vw}
  .brand img{width:120px}
  nav{
    flex-basis:100%;
    padding-top:10px;
    padding-bottom:2px;
    white-space:nowrap;
    scrollbar-width:none;
  }
  nav::-webkit-scrollbar{display:none}

  /* Nieuwste single rustiger op telefoon. */
  .latest{
    grid-template-columns:105px 1fr;
    gap:14px;
    padding:18px 4vw 22px;
    align-items:start;
  }
  .cover{width:105px;height:105px}
  .latest-copy{padding:4px 0}
  .latest h1{font-size:34px;line-height:1.05;margin:7px 0 10px}
  .latest p{font-size:16px;margin:0;line-height:1.4}
  .buttons{grid-column:1/-1;margin-top:14px}
  .buttons a{text-align:center}
}

@media(max-width:520px){
  .hero{
    height:400px;
    background-position:center 25%;
  }
}


/* Mobiel v2: meer van de bovenkant van de originele podiumfoto zichtbaar */
@media(max-width:850px){
  .hero{
    height:500px;
    background-size:cover;
    background-position:center top;
  }
}
@media(max-width:520px){
  .hero{
    height:500px;
    background-position:center top;
  }
}


/* Mobiel v3: schone podiumfoto zonder drukker-kader/snijlijnen */
@media(max-width:850px){
  .hero{
    background-image:
      linear-gradient(90deg,rgba(3,10,20,.78),rgba(3,10,20,.06)),
      url('assets/rieks-mobiel-zonder-drukkader.png') !important;
    background-position:center top;
  }
}


/* Mobiel v4: compact hamburgermenu; desktop blijft ongewijzigd */
.menu-toggle{display:none}

@media(max-width:850px){
  header{
    position:relative;
    flex-wrap:wrap;
    justify-content:space-between;
  }

  .menu-toggle{
    display:block;
    margin-left:auto;
    border:0;
    background:transparent;
    color:#fff;
    font-size:32px;
    line-height:1;
    padding:6px 8px;
    cursor:pointer;
  }

  header nav{
    display:none;
    order:4;
    width:100%;
    flex-basis:100%;
    overflow:visible;
    white-space:normal;
    padding:10px 0 4px;
    gap:0;
    flex-direction:column;
    align-items:stretch;
  }

  header nav.menu-open{
    display:flex;
  }

  header nav a{
    display:block;
    width:100%;
    padding:12px 4px;
    border-top:1px solid rgba(255,255,255,.12);
  }
}


/* Contact, boekingen en socials */
.contact-block{gap:8px}
.contact-mail{font-weight:800;color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer-socials{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:10px!important;margin:3px 0}
.footer-socials a{display:inline-flex;align-items:center;padding:8px 12px;border:1px solid #637083;border-radius:999px;font-size:13px;font-weight:800}
.footer-socials a:hover,.contact-mail:hover{color:#ffa313}

@media(max-width:850px){
  header .social{display:flex;order:2;margin-left:10px}
  header .social a{width:36px;height:36px}
  footer{gap:22px}
  .contact-mail{font-size:16px;padding:4px 0}
  .footer-socials a{padding:10px 14px}
}