: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; overflow-x:hidden;}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation:none !important; transition:none !important;} }

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

  /* ---------- NAV ---------- */
  .nav{position:fixed; top:0; left:0; right:0; z-index:70; padding:30px 40px;}
  .nav-inner{display:flex; justify-content:flex-end; align-items:center; max-width:1280px; margin:0 auto;}
  .nav-logo{position:fixed; left:40px; bottom:30px; z-index:50; transition:filter .15s ease;}
  .nav-logo.on-light{filter:invert(76.47%);}
  .nav-logo img{height:86px; width:auto; display:block;}
  /* Hamburger-icoon: rustige balk, altijd rechtsboven, ongeacht schermbreedte of achtergrond */
  .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, border-color .15s ease;}
  .nav-toggle:hover{opacity:0.7;}
  .nav-toggle.on-light{border-color:var(--ink);}
  .nav-toggle.on-light .bars span{background:var(--ink);}
  .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);}

  /* Uitklappaneel: schuift in vanaf rechts, geldt voor alle schermbreedtes */
  .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;}

  /* Halfdoorzichtige overlay achter het paneel, sluit het menu bij een klik ernaast */
  .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;}

  /* ---------- HERO — twee foto's + de naad ---------- */
  .hero{
    position:relative; height:100vh; min-height:640px; overflow:hidden; background:var(--ink);
  }
  .hero-photo{
    position:absolute; inset:-2px; background-position:center 45%; background-size:cover;
    background-image:url('Afbeeldingen/hero-photo.png');
    filter:grayscale(1) contrast(1.12);
  }

  .hero-content{
    position:relative; z-index:5; height:100%; display:flex; flex-direction:column; justify-content:flex-end;
    padding:0 40px 70px; max-width:1280px; margin:0 auto;
  }
  .hero-content h1{
    font-family:var(--display); font-style:italic; font-weight:400; color:var(--white);
    font-size:clamp(2.2rem, 4.6vw, 3.8rem); line-height:1.08; max-width:16ch; margin:0 0 20px;
    text-shadow:0 2px 24px rgba(0,0,0,0.4);
  }
  .hero-content p{color:rgba(255,255,255,0.82); max-width:46ch; font-size:1.02rem; margin:0;}

  /* ---------- INTRO statement ---------- */
  .intro{padding-top:90px; padding-bottom:90px; text-align:center;}
  .intro p{
    font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(1.25rem, 2vw, 1.6rem);
    max-width:58ch; margin:0 auto 34px; color:var(--ink); line-height:1.55;
  }
  .intro a{font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:3px;}

  /* ---------- ACTUEEL preview ---------- */
 .actueel-preview{padding-top:40px; padding-bottom:100px;}
  .actueel-list{display:flex; flex-direction:column; gap:40px; margin:0 0 8px;}
  .actueel-item{border-top:1px solid var(--line); padding-top:24px; display:block; text-decoration:none; color:inherit; transition:opacity .2s ease;}
  a.actueel-item:hover{opacity:0.7;}
  .actueel-item .date{font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--silver); display:block; margin-bottom:10px;}
  .actueel-item h3{font-family:var(--display); font-style:italic; font-weight:400; font-size:1.4rem; margin:0 0 10px;}
  .actueel-item p{margin:0; max-width:62ch;}

  /* ---------- WERK gallery ---------- */
  .werk{background:var(--black); padding:70px 0 56px;}
  .section-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:56px; flex-wrap:wrap; gap:16px;}
  .section-head h2{font-family:var(--display); font-style:italic; font-weight:400; font-size:2rem; margin:0;}
  .section-head .all-link{font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:2px;}
  .werk .section-head h2, .werk .section-head .all-link{color:var(--white);}
  .werk .section-head .all-link{border-bottom-color:var(--white);}

  .gallery{display:grid; grid-template-columns:1.3fr 1fr; gap:28px;}
  .gallery-col{display:flex; flex-direction:column; gap:28px;}
  .g-item{position:relative; overflow:hidden; background:#222; display:block; text-decoration:none;}
  .g-item.tall{flex:1; aspect-ratio:auto;}
  .g-item.wide{aspect-ratio:1.91;}
  .ph{width:100%; height:100%; background:repeating-linear-gradient(125deg, #1a1a1a 0 4px, #4a4a4a 4px 9px); filter:grayscale(1);}
  .ph.color{
    filter:none;
    background:
      linear-gradient(135deg, rgba(180,60,40,0.55), rgba(40,70,90,0.5)),
      repeating-linear-gradient(125deg, #3a2a20 0 4px, #6a5240 4px 9px);
  }
.ph.foto{
  background-size:cover;
  background-position:center;
  filter:none;
}
  .g-item.video .ph{display:flex; align-items:center; justify-content:center;}
  .video-play{width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,0.65); display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.1rem;}
.g-item.video video{width:100%; height:100%; object-fit:cover; display:block;}
.g-item.video .ph{filter:none;}
.g-item.video .video-play{position:absolute; transition:opacity .25s ease;}
.g-item.video:hover .video-play, .g-item.video:focus-within .video-play{opacity:0;}

  .g-caption{
    position:absolute; left:0; right:0; bottom:0; padding:22px 24px;
    background:linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
    color:var(--white); opacity:0; transform:translateY(6px);
    transition:opacity .3s ease, transform .3s ease;
  }
  .g-item:hover .g-caption, .g-item:focus-within .g-caption{opacity:1; transform:translateY(0);}
  .g-caption .t{font-family:var(--display); font-style:italic; font-size:1.15rem; display:block;}
  .g-caption .y{font-size:0.72rem; letter-spacing:0.05em; opacity:0.8;}
  .g-tag{position:absolute; top:16px; left:16px; z-index:2; font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,0.5); padding:4px 9px;}

  @media (max-width:820px){ .gallery{grid-template-columns:1fr;} .g-item.tall{flex:none; aspect-ratio:4/3.4;} .g-item .g-caption{opacity:1; transform:none;} }

  /* ---------- ARMAZOEN ---------- */
 .armazoen{background:var(--black); color:var(--white); padding:56px 0 90px; position:relative;}
 .armazoen::before{content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:calc(100% - 80px); max-width:1200px; height:1px; background:rgba(255,255,255,0.14);}
  .armazoen-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:end;}
  .armazoen-grid > div:first-child{align-self:start; margin-top:24px;}
  .armazoen-eyebrow{font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--silver); margin:0 0 20px;}
  .armazoen h2{font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(2rem,3.4vw,2.8rem); margin:0 0 22px; line-height:1.12;}
  .armazoen p{color:rgba(255,255,255,0.78); max-width:48ch; margin:0 0 30px;}
  .armazoen .route{display:flex; gap:28px; flex-wrap:wrap; font-size:0.78rem; letter-spacing:0.03em; color:var(--silver); margin-bottom:34px;}
  .armazoen .route span{position:relative; padding-left:16px;}
  .armazoen .route span::before{content:''; position:absolute; left:0; top:50%; width:6px; height:6px; border-radius:50%; background:var(--white); transform:translateY(-50%);}
  .armazoen .route span.upcoming{opacity:0.75;}
  .armazoen .route span.upcoming::before{background:transparent; border:1px solid var(--white);}
  .armazoen-photo{aspect-ratio:4/3; overflow:hidden; background-size:cover; background-position:center; transition:transform .5s ease;}
.armazoen-photo:hover{transform:scale(1.15);}
  .armazoen a.link{font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; color:var(--white); border-bottom:1px solid var(--white); padding-bottom:3px;}
  @media (max-width:820px){.armazoen-grid{grid-template-columns:1fr;}}

  footer{background:var(--offwhite); border-top:1px solid var(--line); 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(--ink);}
  .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;}
}