/* Bal Herenkleding - stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Archivo:wght@400;500;600;700&display=swap');

:root{
  --paper:#F3F2EE;
  --paper-2:#ECEAE3;
  --ink:#1C1B19;
  --loden:#2E3A30;
  --loden-2:#27322a;
  --brass:#8C6A41;
  --line:#D7D3CA;
  --muted:#6B6862;
  --maxw:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  font-weight:400;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* labels / spec-tag motief */
.eyebrow{
  font-family:'Archivo',sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brass);
  margin:0 0 14px;
}
.tag{
  display:inline-block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line);
  padding:4px 10px;
  border-radius:2px;
}

/* koppen */
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:500;line-height:1.12;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(2.4rem,6vw,4.1rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
h3{font-size:1.35rem;line-height:1.25}
p{margin:0 0 1.1em}

/* header */
.site-head{border-bottom:1px solid var(--line);background:var(--paper)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{font-family:'Fraunces',serif;font-size:1.4rem;font-weight:600;text-decoration:none;letter-spacing:-.01em}
.brand small{display:block;font-family:'Archivo',sans-serif;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-top:-2px}
.nav{display:flex;gap:30px;align-items:center}
.nav a{text-decoration:none;font-size:14.5px;font-weight:500;color:var(--ink);padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--brass)}
.nav a.is-active{border-bottom-color:var(--ink)}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:3px;padding:8px 12px;font:inherit;font-size:13px;cursor:pointer}

/* hero */
.hero{padding:84px 0 64px;border-bottom:1px solid var(--line)}
.hero .lead{max-width:760px}
.hero p.dek{font-size:1.2rem;color:var(--muted);max-width:640px;margin-top:22px}
.hero-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* spec rij */
.spec{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:3px;overflow:hidden;margin:0}
.spec div{padding:18px 20px;border-right:1px solid var(--line)}
.spec div:last-child{border-right:0}
.spec dt{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0 0 6px}
.spec dd{margin:0;font-family:'Fraunces',serif;font-size:1.15rem}

/* secties */
section.block{padding:64px 0;border-bottom:1px solid var(--line)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.sec-head .link{font-size:14px;font-weight:600;text-decoration:none;border-bottom:2px solid var(--brass);padding-bottom:2px}

/* artikel kaarten */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{display:flex;flex-direction:column;border-top:2px solid var(--ink);padding-top:18px;text-decoration:none;color:inherit}
.card .cat{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:12px}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:15.5px;margin:0}
.card .m{margin-top:auto;padding-top:16px;font-size:13px;color:var(--muted)}
.card:hover h3{color:var(--brass)}

/* uitgelicht / partners op home */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.feat-card{background:var(--paper-2);border:1px solid var(--line);border-radius:4px;padding:30px}
.feat-card .eyebrow{margin-bottom:10px}
.feat-card h3{margin-bottom:10px}
.feat-card p{color:var(--muted);font-size:15.5px}
.feat-card a.out{display:inline-block;margin-top:6px;font-weight:600;text-decoration:none;border-bottom:2px solid var(--brass);padding-bottom:2px;font-size:14.5px}

/* artikel body */
.article{padding:60px 0}
.article .head{max-width:760px;margin-bottom:40px}
.article h1{font-size:clamp(2rem,4.4vw,3.1rem);margin-bottom:18px}
.article .dek{font-size:1.18rem;color:var(--muted)}
.article .meta{margin-top:22px;font-size:13px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.prose{max-width:680px}
.prose h2{margin:42px 0 14px}
.prose h3{margin:30px 0 10px}
.prose ul,.prose ol{margin:0 0 1.1em;padding-left:1.2em}
.prose li{margin-bottom:.4em}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:3px}
.prose a:hover{color:var(--brass)}
.callout{background:var(--paper-2);border-left:3px solid var(--brass);padding:18px 22px;border-radius:0 3px 3px 0;margin:28px 0;font-size:15.5px}
.callout p:last-child{margin-bottom:0}
table.compare{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
table.compare th,table.compare td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
table.compare th{background:var(--paper-2);font-family:'Archivo',sans-serif;font-weight:600;font-size:13px;letter-spacing:.03em}

.backlink{display:inline-block;margin-bottom:30px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.backlink:hover{color:var(--brass)}

/* generieke tekstpagina */
.page{padding:60px 0}
.page .prose{max-width:720px}
.page h1{margin-bottom:24px}

/* contact */
.contact-mail{font-family:'Fraunces',serif;font-size:clamp(1.6rem,4vw,2.4rem);text-decoration:none;border-bottom:2px solid var(--brass);padding-bottom:3px}
.contact-mail:hover{color:var(--brass)}

/* lijst van artikelen (nieuws index) */
.post-list{border-top:1px solid var(--line)}
.post-row{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;align-items:start}
.post-row .side{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.04em}
.post-row .side .c{color:var(--brass);text-transform:uppercase;letter-spacing:.12em;display:block;margin-bottom:6px}
.post-row h3{margin-bottom:8px}
.post-row p{margin:0;color:var(--muted);font-size:15.5px}
.post-row:hover h3{color:var(--brass)}

/* partners */
.partner-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.partner{border:1px solid var(--line);border-radius:4px;padding:30px;background:var(--paper)}
.partner h3{margin-bottom:6px}
.partner .role{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);margin-bottom:14px}
.partner p{color:var(--muted);font-size:15.5px}
.partner a.out{display:inline-block;margin-top:4px;font-weight:600;text-decoration:none;border-bottom:2px solid var(--brass);padding-bottom:2px;font-size:14.5px}
.partner-note{margin-top:30px;font-size:14px;color:var(--muted);max-width:680px}

/* footer */
.site-foot{background:var(--loden);color:#E9E7DF;padding:60px 0 30px;margin-top:0}
.site-foot a{color:#E9E7DF}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.14)}
.foot-grid h4{font-family:'Archivo',sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#A9B3A6;margin-bottom:16px}
.foot-grid .brandblock .bf{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:600;margin-bottom:10px}
.foot-grid p{color:#C4CABF;font-size:14.5px;margin:0 0 1em;max-width:340px}
.foot-links{list-style:none;margin:0;padding:0}
.foot-links li{margin-bottom:10px}
.foot-links a{text-decoration:none;font-size:14.5px;color:#D7DBD2}
.foot-links a:hover{color:#fff;text-decoration:underline}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;font-size:13px;color:#9FA89B}
.foot-bottom a{color:#9FA89B;text-decoration:none}
.foot-bottom a:hover{color:#fff}

/* focus + motion */
a:focus-visible,button:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* responsive */
@media(max-width:880px){
  .cards{grid-template-columns:1fr 1fr}
  .feature{grid-template-columns:1fr}
  .partner-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .spec{grid-template-columns:1fr}
  .spec div{border-right:0;border-bottom:1px solid var(--line)}
  .spec div:last-child{border-bottom:0}
}
@media(max-width:640px){
  body{font-size:16px}
  .nav{display:none;position:absolute;top:74px;left:0;right:0;background:var(--paper);flex-direction:column;gap:0;border-bottom:1px solid var(--line);padding:8px 24px 18px;z-index:20}
  .nav.open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav a.is-active{border-bottom-color:var(--line);color:var(--brass)}
  .menu-btn{display:inline-block}
  .site-head{position:relative}
  .cards{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .post-row{grid-template-columns:1fr;gap:8px}
  .hero{padding:54px 0 44px}
  section.block{padding:48px 0}
}