:root{
    --black:#111111;
    --ink:#3c3c3c;
    --silver:#b0b0b0;
    --offwhite:#f5f3ef;
    --white:#ffffff;
    --line:rgba(60,60,60,0.16);
    --display:'Cormorant Garamond', serif;
    --sans:'Work Sans', sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation:none !important; transition:none !important;} }

  body{margin:0; background:var(--black); color:var(--white); font-family:var(--sans); font-weight:300; line-height:1.6;}
  a{color:inherit;}
  :focus-visible{outline:1px solid var(--white); outline-offset:4px;}
  .wrap{max-width:1280px; margin:0 auto; padding:0 40px;}

  /* ---------- NAV (interne pagina) ---------- */
  .nav{padding:30px 40px;}
  .nav-inner{display:flex; justify-content:space-between; align-items:center; max-width:1280px; margin:0 auto;}
  .nav-logo img{height:86px; width:auto; display:block;}
  .nav-toggle{display:flex; align-items:center; justify-content:center; width:44px; height:44px; background:none; border:1px solid var(--white); border-radius:1px; cursor:pointer; padding:0; transition:opacity .2s ease;}
  .nav-toggle:hover{opacity:0.7;}
  .nav-toggle .bars{position:relative; width:20px; height:13px; display:block;}
  .nav-toggle .bars span{position:absolute; left:0; width:100%; height:1px; background:var(--white); transition:transform .25s ease, opacity .2s ease;}
  .nav-toggle .bars span:nth-child(1){top:0;}
  .nav-toggle .bars span:nth-child(2){top:6px;}
  .nav-toggle .bars span:nth-child(3){top:12px;}
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

  .nav-links{position:fixed; inset:0 0 0 auto; width:320px; max-width:82%; background:var(--black); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:30px; padding:60px 46px; list-style:none; margin:0; transform:translateX(100%); transition:transform .35s ease; z-index:60;}
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:0.95rem; letter-spacing:0.08em; text-transform:uppercase; text-decoration:none; color:var(--white); opacity:0.85; transition:opacity .2s ease;}
  .nav-links a:hover{opacity:1;}
  .nav-links .nav-lang{margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.2);}
  .nav-links .nav-lang a{font-size:0.8rem; opacity:0.6;}
  .nav-links .nav-lang a:hover{opacity:1;}
  .nav-links a.active{opacity:1; border-bottom:1px solid var(--white); padding-bottom:2px;}

  .nav-overlay{position:fixed; inset:0; background:rgba(17,17,17,0.4); opacity:0; visibility:hidden; transition:opacity .3s ease; z-index:55;}
  .nav-overlay.open{opacity:1; visibility:visible;}

  /* ---------- BIJDRAGEN: foto-poster met verspreide titels ---------- */
  .bijdragen-hero{padding-top:56px; padding-bottom:90px;}
  .bijdragen-title{font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(1.9rem,3.6vw,3.05rem); margin:0 0 40px; line-height:1.1; color:var(--white); position:relative; z-index:6;}

  .bijdragen-photo-wrap{position:relative; width:100%; max-width:620px; margin:clamp(-160px, -14.5vw, -20px) auto 0; aspect-ratio:3/4; background:#050505; z-index:1;}
  .bijdragen-photo{position:absolute; inset:0; background-image:url('Afbeeldingen/bijdragen-photo.png'); background-size:cover; background-position:center;}

  .bijdrage-link{
    position:absolute; z-index:5; white-space:nowrap; background:none; border:none; padding:5px 8px; margin:0; cursor:pointer;
    font-family:var(--display); font-style:italic; font-weight:400; font-size:0.98rem; line-height:1.3; text-align:left; color:var(--white);
    text-shadow:0 1px 10px rgba(0,0,0,0.85); transition:opacity .2s ease;
  }
  
  .bijdrage-link:hover, .bijdrage-link:focus-visible{opacity:0.72; text-decoration:underline;}
  .bijdrage-link.align-right{text-align:right;}
  .bijdrage-link.align-center{text-align:center; transform:translateX(-50%);}

  /* Posities: percentages t.o.v. de foto-poster (.bijdragen-photo-wrap) */
  .p1{left:60%; top:68%;}
  .p2{left:3%; top:26%;}
  .p3{left:1%; top:74%;}
  .p4{left:46%; top:76%;}
  .p5{left:70%; top:32%;}
  .p6{left:16%; top:53%;}
  .p7{left:48%; top:29%;}
  .p8{left:61%; top:83%;}
  .p9{left:39%; top:46%;}
  .p10{left:43%; top:59%;}
  .p11{left:25%; top:65%;}
  .p12{left:2%; top:37%;}
  .p13{left:20%; top:88%;}

  @media (max-width:640px){
    .bijdragen-photo-wrap{max-width:420px;}
    .bijdrage-link{font-size:0.8rem; white-space:normal; max-width:150px;}
  }

  /* ---------- MODAL: verschijnt boven de pagina, geen paginawissel ---------- */
  .bijdrage-overlay{position:fixed; inset:0; background:rgba(0,0,0,0.72); opacity:0; visibility:hidden; transition:opacity .3s ease; z-index:90;}
  .bijdrage-overlay.open{opacity:1; visibility:visible;}

  .bijdrage-modal{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(0.96); width:min(640px, 88vw); max-height:82vh; overflow-y:auto; background:var(--black); border:1px solid rgba(255,255,255,0.14); padding:44px 42px; z-index:95; opacity:0; visibility:hidden; transition:opacity .25s ease, transform .25s ease;}
  .bijdrage-modal.open{opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1);}
  .bijdrage-modal-close{position:absolute; top:18px; right:18px; width:36px; height:36px; background:none; border:1px solid rgba(255,255,255,0.3); border-radius:1px; color:var(--white); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;}
  .bijdrage-modal-close:hover{opacity:0.7;}
  .bijdrage-modal .tag{display:inline-block; font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.08); padding:4px 10px; margin-bottom:16px;}
  .bijdrage-modal .date{display:block; font-size:0.76rem; letter-spacing:0.04em; color:var(--silver); margin-bottom:10px;}
  .bijdrage-modal h2{font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(1.5rem,3vw,2rem); margin:0 0 20px; line-height:1.2;}
  .bijdrage-modal p{margin:0 0 26px; color:rgba(255,255,255,0.82); max-width:60ch;}
  .bijdrage-modal a.source-link{display:inline-block; font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase; text-decoration:none; color:var(--white); border-bottom:1px solid var(--white); padding-bottom:3px;}
  .bijdrage-modal p a{color:var(--white); text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.45); padding-bottom:1px; transition:border-color .2s ease;}
  .bijdrage-modal p a:hover{border-bottom-color:rgba(255,255,255,0.9);}
  .bijdrage-modal-video{position:relative; aspect-ratio:16/9; background:var(--black); margin-bottom:24px; overflow:hidden; cursor:pointer; display:none;}
  .bijdrage-modal-thumb{width:100%; height:100%; object-fit:cover; display:block; opacity:0.88;}
  .bijdrage-modal-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,0.65); background:none; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem; transition:opacity .25s ease;}
  .bijdrage-modal-video:hover .bijdrage-modal-play{opacity:0.7;}
  .bijdrage-modal-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}
  .bijdrage-modal-video.playing .bijdrage-modal-thumb, .bijdrage-modal-video.playing .bijdrage-modal-play{display:none;}
  .bijdrage-modal-carousel{margin-bottom:24px; display:none;}
  .bijdrage-modal-frame{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--black);}
  .bijdrage-modal-frame .bijdrage-modal-slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .4s ease;}
  .bijdrage-modal-frame .bijdrage-modal-slide.active{opacity:1;}
  .bijdrage-modal-carousel-nav{display:flex; justify-content:space-between; align-items:center; margin-top:10px;}
  .bijdrage-modal-arrow{width:36px; height:36px; background:none; border:1px solid rgba(255,255,255,0.3); border-radius:1px; color:var(--white); font-size:0.9rem; cursor:pointer; transition:opacity .2s ease;}
  .bijdrage-modal-arrow:hover{opacity:0.7;}
  .bijdrage-modal-counter{font-size:0.74rem; letter-spacing:0.04em; color:var(--silver);}
  .bijdrage-modal-media{display:none;}
  .bijdrage-modal-media .bijdrage-media-block{margin-bottom:16px;}
  .bijdrage-modal-media .bijdrage-media-block:last-child{margin-bottom:24px;}
  .bijdrage-media-photo{aspect-ratio:16/9; background-size:cover; background-position:center; background-color:var(--black);}
  .bijdrage-media-video{position:relative; aspect-ratio:16/9; background:var(--black); overflow:hidden; cursor:pointer;}
  .bijdrage-media-video .bijdrage-media-thumb{width:100%; height:100%; object-fit:cover; display:block; opacity:0.88;}
  .bijdrage-media-video .bijdrage-media-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,0.65); background:none; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem; transition:opacity .25s ease;}
  .bijdrage-media-video:hover .bijdrage-media-play{opacity:0.7;}
  .bijdrage-media-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}
  .bijdrage-media-video.playing .bijdrage-media-thumb, .bijdrage-media-video.playing .bijdrage-media-play{display:none;}
  .bijdrage-media-video video{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}
  .bijdrage-inline-carousel{margin:24px 0; max-width:60ch;}
  .bijdrage-media-carousel-frame{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--black);}
  .bijdrage-media-carousel-frame .bijdrage-media-slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .4s ease;}
  .bijdrage-media-carousel-frame .bijdrage-media-slide.active{opacity:1;}
  .bijdrage-media-carousel-nav{display:flex; justify-content:space-between; align-items:center; margin-top:10px;}
  .bijdrage-media-prev,.bijdrage-media-next{width:36px; height:36px; background:none; border:1px solid rgba(255,255,255,0.3); border-radius:1px; color:var(--white); font-size:0.9rem; cursor:pointer; transition:opacity .2s ease;}
  .bijdrage-media-prev:hover,.bijdrage-media-next:hover{opacity:0.7;}
  .bijdrage-media-counter{font-size:0.74rem; letter-spacing:0.04em; color:var(--silver);}
  .bijdrage-media-caption{font-size:0.78rem; font-style:italic; color:var(--silver); text-align:center; margin:8px 0 0;}
  .bijdrage-inline-carousel .bijdrage-media-caption{max-width:none; width:100%;}
  .bijdrage-inline-media{margin:24px 0; max-width:60ch;}
  .bijdrage-modal ul{margin:0 0 26px; padding-left:20px; max-width:60ch; color:rgba(255,255,255,0.82);}
  .bijdrage-modal ul li{margin-bottom:10px;}

  footer{background:var(--black); border-top:1px solid rgba(255,255,255,0.14); padding:40px 0;}
  .footer-inner{display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:16px; font-size:0.78rem; letter-spacing:0.03em;}
  footer a{text-decoration:none; border-bottom:1px solid transparent;}
  footer a:hover{border-color:var(--white);}
  .footer-links{display:flex; flex-wrap:wrap; gap:22px;}

  .reveal{opacity:0; transform:translateY(14px); transition:opacity .8s ease, transform .8s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

@media (max-width:600px){
  .nav-logo{left:20px;}
  .nav-logo img{height:auto; width:46vw; max-width:220px;}
}