:root{--ink:#1d1d1b;--paper:#ffffff;--dark:#2a2a28;--darker:#211f1e;--line:#e3e0dc;
--accent:#c9502a;--muted:#8b857f;--maxw:1180px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
/* header */
header.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;
max-width:var(--maxw);margin:0 auto;padding:18px 24px;flex-wrap:wrap}
.logo img{height:46px;width:auto}
nav ul{display:flex;flex-wrap:wrap;gap:22px;list-style:none;margin:0;padding:0}
nav a{color:var(--ink);font-size:15px;letter-spacing:.02em;padding:4px 0;border-bottom:2px solid transparent}
nav a:hover{color:var(--accent);text-decoration:none}
nav a.on{color:var(--accent);border-bottom-color:var(--accent)}
/* hero */
.hero{background:var(--darker);color:#f4f1ee}
.hero-in{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:center;
max-width:var(--maxw);margin:0 auto;padding:64px 24px}
.hero img{border-radius:2px}
.hero h1{font:italic 300 40px/1.15 Georgia,"Times New Roman",serif;margin:0 0 18px}
.hero p{font-size:18px;color:#cfc9c3;margin:0 0 26px;max-width:52ch}
.knop{display:inline-block;background:var(--accent);color:#fff;padding:11px 22px;
font-size:14px;letter-spacing:.04em;border-radius:2px}
.knop:hover{background:#a94021;text-decoration:none;color:#fff}
/* paginatitel */
.titel{background:var(--dark);color:#fff}
.titel h1{font:italic 300 34px/1.2 Georgia,"Times New Roman",serif;margin:0;
max-width:var(--maxw);margin:0 auto;padding:38px 24px}
.intro{max-width:var(--maxw);margin:0 auto;padding:36px 24px 8px}
.intro p{max-width:70ch;color:#454340;font-size:17px}
/* galerij */
.galerij{background:var(--dark);padding:36px 0 56px;margin-top:32px}
.rooster{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
max-width:var(--maxw);margin:0 auto;padding:0 24px}
.kaart{background:#333230;border-radius:2px;overflow:hidden;display:block;color:#efece8}
.kaart:hover{text-decoration:none}
.kaart .beeld{aspect-ratio:4/5;overflow:hidden;background:#262524;
display:flex;align-items:center;justify-content:center;padding:10px}
.kaart .beeld img{max-width:100%;max-height:100%;width:auto;height:auto;
object-fit:contain;transition:transform .45s ease}
.kaart:hover .beeld img{transform:scale(1.045)}
.kaart .naam{padding:12px 14px;font:italic 17px/1.3 Georgia,"Times New Roman",serif;color:#efece8}
.kaart .naam::after{content:" /";color:var(--accent);font-style:normal}
/* blokken */
.blokken{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
max-width:var(--maxw);margin:0 auto;padding:56px 24px}
.blok h2{font:italic 300 24px/1.2 Georgia,"Times New Roman",serif;margin:0 0 10px}
.blok p{color:#54514d;margin:0 0 18px}
/* tekstpagina */
.tekst{max-width:var(--maxw);margin:0 auto;padding:40px 24px 64px;
display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.tekst .body{max-width:70ch}
.tekst h2{font:italic 300 26px/1.2 Georgia,"Times New Roman",serif;margin:32px 0 10px}
.kader{background:#f6f4f1;border:1px solid var(--line);padding:22px 24px;border-radius:2px}
.kader h3{font:italic 300 21px/1.2 Georgia,"Times New Roman",serif;margin:0 0 12px}
.kader p{margin:0 0 6px;font-size:15px;color:#454340}
/* werkpagina */
.werk{max-width:1040px;margin:0 auto;padding:40px 24px 64px}
.werk figure{margin:0 0 22px;background:#f2efec;border:1px solid var(--line);padding:18px}
.werk figure img{margin:0 auto;max-height:78vh;width:auto}
.werk h1{font:italic 300 32px/1.2 Georgia,"Times New Roman",serif;margin:0 0 8px}
.meta{color:var(--muted);font-size:14px;margin:0 0 16px}
.werk .bij{max-width:65ch;color:#454340}
.blader{display:flex;justify-content:space-between;gap:16px;margin-top:36px;
border-top:1px solid var(--line);padding-top:18px;font-size:15px}
/* footer */
footer.site{background:var(--darker);color:#a8a29b;margin-top:0;padding:44px 0 52px}
footer .cols{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
max-width:var(--maxw);margin:0 auto;padding:0 24px}
footer h4{color:#e8e4e0;font:italic 300 19px/1.2 Georgia,serif;margin:0 0 10px}
footer p,footer li{font-size:14px;line-height:1.7;margin:0}
footer ul{list-style:none;margin:0;padding:0}
footer a{color:#c9c3bc}
footer a:hover{color:#fff}
.klein{margin-top:30px;padding:16px 24px 0;border-top:1px solid #3a3734;font-size:13px;
max-width:var(--maxw);margin-left:auto;margin-right:auto;color:#7d7871}
@media(max-width:820px){
 .hero-in{grid-template-columns:1fr;gap:28px;padding:44px 24px}
 .hero img{max-width:220px}
 .hero h1{font-size:30px}
 .tekst{grid-template-columns:1fr;gap:32px}
 .titel h1{font-size:26px;padding:28px 24px}
 .bar{padding:14px 20px}
 nav ul{gap:16px}
}