/* Blog – zelfde zwart & goud als de hoofdsite */
:root{
  --bg:#0a0a0a;--surface:#151411;--ink:#f2ece0;--muted:#a89f8d;--line:#2c2820;--star:#c9ae78;
  --f-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --f-body:"Cormorant Garamond",Garamond,Georgia,serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:1.15rem;font-weight:500;line-height:1.65;margin:0}
a{color:inherit;text-decoration-color:var(--star);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--star);outline-offset:3px}
img{max-width:100%;display:block}
.wrap{max-width:68rem;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);text-transform:uppercase;line-height:.95;text-wrap:balance;margin:0;letter-spacing:.01em}
p{margin:0}
.label{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* menu (gelijk aan de hoofdsite) */
nav{border-bottom:2px solid color-mix(in srgb,var(--star) 55%,transparent)}
nav .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:1rem;flex-wrap:wrap}
nav .brand{display:flex;align-items:center;gap:.8rem;text-decoration:none}
nav .brand img{height:2.75rem;width:auto}
nav .brand span{font-family:"Jost",var(--f-mono);font-weight:400;font-size:.82rem;letter-spacing:.34em;text-transform:uppercase;color:var(--star)}
nav ul{display:flex;gap:1.25rem;list-style:none;margin:0;padding:0;flex-wrap:wrap;align-items:center}
nav ul a{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--star);text-shadow:0 0 8px color-mix(in srgb,var(--star) 60%,transparent)}
nav ul a:hover{color:#f6e6bd}
nav ul a[aria-current]{text-decoration:underline;text-decoration-color:var(--star)}
nav ul a.cta-link{border:1px solid var(--star);padding:.5rem .85rem}
nav ul a.cta-link:hover{background:var(--star);color:#0a0a0a;text-shadow:none}
@media (prefers-reduced-motion:no-preference){
  nav ul a{animation:lampText 2.8s ease-in-out infinite}
  @keyframes lampText{0%,100%{color:color-mix(in srgb,var(--star) 62%,#0a0a0a);text-shadow:none}50%{color:#f6e6bd;text-shadow:0 0 6px var(--star),0 0 18px var(--star)}}
}

/* blogoverzicht */
.blog-head{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,4vw,2.5rem);border-bottom:3px solid color-mix(in srgb,var(--star) 70%,transparent)}
.blog-head h1{font-size:clamp(3.6rem,12vw,7.5rem);font-weight:900;line-height:.85}
.blog-head h1 span{color:var(--star)}
.blog-head p.intro{margin-top:1.25rem;max-width:36rem;color:var(--muted);font-size:clamp(1.12rem,1.8vw,1.3rem)}
.posts{list-style:none;margin:0;padding:clamp(2rem,5vw,3.5rem) 0;display:grid;gap:2rem}
.post{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:clamp(1.25rem,4vw,3rem);align-items:center;text-decoration:none;border:1px solid var(--line);background:var(--surface)}
.post .ph{aspect-ratio:4/3;overflow:hidden}
.post .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.post:hover .ph img{transform:scale(1.04)}
.post .tx{padding:1.5rem clamp(1.25rem,3vw,2rem) 1.5rem 0;display:flex;flex-direction:column;gap:.8rem}
.post h2{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800}
.post p{color:var(--muted)}
.post .more{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--star)}
@media (max-width:720px){.post{grid-template-columns:minmax(0,1fr)}.post .tx{padding:0 1.25rem 1.5rem}}

/* artikel */
.art-head{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,4vw,2.5rem)}
.art-head .wrap{max-width:52rem}
.art-head h1{font-size:clamp(2.8rem,8vw,5.4rem);font-weight:900;line-height:.9;margin-top:.9rem}
.art-head .dek{margin-top:1.4rem;font-size:clamp(1.2rem,2vw,1.45rem);color:var(--muted);max-width:40rem}
.byline{display:flex;align-items:center;gap:.9rem;margin-top:1.75rem}
.byline img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:1px solid var(--star)}
.byline strong{font-family:var(--f-display);font-weight:800;font-size:1.2rem;text-transform:uppercase;display:block;line-height:1}
.byline span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.art-img{max-width:68rem;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px))}
.art-img img{width:100%;aspect-ratio:16/8;object-fit:cover;object-position:50% 30%}
.art-img figcaption{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:.6rem}
article.body{max-width:40rem;margin:0 auto;padding:clamp(2rem,5vw,3.5rem) max(16px,env(safe-area-inset-left,0px)) 3rem}
article.body p{margin-bottom:1.15rem;font-size:1.22rem;line-height:1.7}
article.body h2{font-size:clamp(1.9rem,4.5vw,2.6rem);font-weight:800;margin:2.75rem 0 1.1rem;padding-top:1.5rem;border-top:2px solid color-mix(in srgb,var(--star) 55%,transparent)}
article.body h2 .n{color:var(--star);margin-right:.35em}
article.body blockquote{margin:2rem 0;padding-left:1.2rem;border-left:3px solid var(--star);font-style:italic;font-size:clamp(1.45rem,2.8vw,1.8rem);line-height:1.3}
.sign{font-family:var(--f-display);font-weight:800;font-size:1.6rem;text-transform:uppercase;color:var(--star);margin-top:2rem!important}
.after{border-top:3px solid color-mix(in srgb,var(--star) 70%,transparent);background:var(--surface)}
.after .wrap{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-block:2.25rem}
.after p{font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,3vw,2rem);text-transform:uppercase;line-height:1.05;max-width:30rem}
.btns{display:flex;gap:.75rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:.85rem 1.35rem;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:1px solid var(--star)}
.btn-gold{background:var(--star);color:#0a0a0a}
.btn-gold:hover{background:#e0c78f}
.btn-line{color:var(--star)}
.btn-line:hover{background:color-mix(in srgb,var(--star) 14%,transparent)}
footer{border-top:3px solid color-mix(in srgb,var(--star) 70%,transparent)}
footer .wrap{padding-block:1.4rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.9rem;color:var(--muted)}
.progress{position:fixed;top:0;left:0;height:3px;background:var(--star);width:0;z-index:5}