: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: scrolt gewoon mee) ---------- */
  .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;}

  /* ---------- INTERNE PAGINA'S ---------- */
  .page-header{padding-top:56px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,0.14);}
  .page-eyebrow{font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--silver); margin:0 0 18px;}
  .page-header h1{font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(2rem,4vw,3rem); margin:0; line-height:1.15;}
  .page-content{padding-top:64px; padding-bottom:140px;}

  /* ---------- BLOGPOST: hero ---------- */
  .blog-post-container{max-width:950px; margin:0 auto;}
.blog-post-hero{width:100%; aspect-ratio:16/9; background:#e7e4dc; margin-bottom:28px; display:block; box-shadow:0 0 70px rgba(224,184,122,0.26);}

  /* ---------- BLOGPOST: tekst ---------- */
  .blog-post-text{width:100%; background:var(--white); border:1px solid var(--line); padding:48px 56px; box-shadow:0 0 20px rgba(224,184,122,0.4), 0 0 100px rgba(224,184,122,0.3);}

@media (max-width:600px){
  .blog-post-text{padding:28px 24px;}
}
  .blog-post-text .blog-post-lead{font-family:var(--display); font-style:italic; font-weight:500; font-size:1.3rem; line-height:1.55; margin:0 0 28px; color:var(--ink);}
  .blog-post-text p{margin:0 0 18px; font-size:1rem; color:var(--ink);}
  .blog-post-text p:last-child{margin-bottom:0;}
  .blog-post-text .blog-post-date{font-weight:500; font-size:1rem; letter-spacing:0.01em; margin:28px 0 1px; color:var(--black);}
  .blog-post-text .blog-post-date:first-of-type{margin-top:0;}

  /* ---------- BLOGPOST: inline foto (klik om te vergroten) ---------- */
  .blog-inline-foto{display:block; width:100%; max-width:70ch; margin:32px auto; border:0; padding:0; background:none; cursor:zoom-in;}
.blog-inline-foto + .blog-inline-foto{margin-top:12px;}
.blog-inline-foto:has(+ .blog-inline-foto){margin-bottom:12px;}
  .blog-inline-foto-img{width:100%; aspect-ratio:3/2; background-color:#e7e4dc; background-size:cover; background-position:center; transition:opacity .2s ease;}
  .blog-inline-foto:hover .blog-inline-foto-img{opacity:0.9;}

  /* ---------- BLOGPOST: staande inline foto (portret) ---------- */
  .blog-inline-foto--portrait{max-width:42ch;}
  .blog-inline-foto--portrait .blog-inline-foto-img{aspect-ratio:3/4;}

  /* ---------- BLOGPOST: collage-foto (volle breedte tekstblok) ---------- */
  .blog-inline-foto--collage{max-width:100%;}

/* ---------- BLOGPOST: perslink (kleine foto + tekst ernaast) ---------- */
.blog-press-row{display:flex; gap:24px; align-items:flex-start; max-width:70ch; margin:32px 0;}
.blog-press-link{display:block; width:140px; flex-shrink:0; text-decoration:none;}
.blog-press-link .blog-inline-foto-img{aspect-ratio:11/16; transition:opacity .2s ease;}
.blog-press-link:hover .blog-inline-foto-img{opacity:0.9;}
.blog-press-text{margin:0; flex:1;}

@media (max-width:700px){
  .blog-press-row{flex-direction:column;}
  .blog-press-link{width:180px;}
}

  /* ---------- BLOGPOST: video-embed ---------- */
  .blog-inline-video{width:100%; max-width:70ch; aspect-ratio:16/9; margin:32px auto; background:#000;}
.blog-inline-video iframe, .blog-inline-video video{width:100%; height:100%; border:0; display:block; object-fit:cover;}
.blog-video-caption{font-size:0.82rem; font-style:italic; color:var(--silver); margin:0 auto 44px; max-width:70ch; text-align:center;}

  /* ---------- BLOGPOST: vorige/volgende-navigatie ---------- */
  .blog-post-nav{display:flex; justify-content:space-between; gap:24px; max-width:70ch; padding-top:36px; margin-top:20px; border-top:1px solid rgba(255,255,255,0.14);}
  .blog-post-nav a{text-decoration:none; font-size:0.85rem; line-height:1.4;}
  .blog-post-nav .nav-label{display:block; font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--silver); margin-bottom:6px;}
  .blog-post-nav .nav-title{font-family:var(--display); font-style:italic; font-size:1.05rem;}
  .blog-post-nav .next{text-align:right; margin-left:auto;}

  .back-link{display:inline-block; 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; margin-top:50px;}

  /* ---------- BLOGPOST: lightbox voor inline foto's ---------- */
  .blog-lightbox{display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,0.96); align-items:center; justify-content:center; padding:40px;}
  .blog-lightbox.is-open{display:flex;}
  .blog-lightbox-img{width:100%; height:100%; background-size:contain; background-repeat:no-repeat; background-position:center;}
  .blog-lightbox-close{position:absolute; top:24px; right:32px; background:none; border:0; color:var(--white); font-size:1.6rem; line-height:1; cursor:pointer; padding:6px;}

  @media (max-width:600px){
    .blog-lightbox{padding:16px;}
  }

  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:none;}

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