@font-face{font-family:'Cinzel';font-weight:700;font-display:swap;src:url(fonts/Cinzel-latin.woff2) format('woff2')}@font-face{font-family:'Alegreya';font-weight:400;font-display:swap;src:url(fonts/Alegreya-latin.woff2) format('woff2')}@font-face{font-family:'Alegreya';font-weight:700;font-display:swap;src:url(fonts/Alegreya-latin.woff2) format('woff2')}
:root{--bg:#14110f;--panel:#1a1511;--line:#6b4f26;--text:#f1e6d6;--muted:#bfae97;--gold:#e0a63a;--title:#ffe2a8}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:18px/1.55 Alegreya,Georgia,serif}
a{color:var(--gold)}img{max-width:100%}
h1,h2,.lore,.kw b,.sw h3,.btn,.top nav,.fac{font-family:Cinzel,Georgia,serif}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;
  background:linear-gradient(#1c1610,#0d0b09);box-shadow:0 1px 0 #8a6326,0 2px 0 #000,0 6px 18px #000a}
.top img{height:34px;display:block}.top nav{display:flex;gap:18px;align-items:center;font-weight:700}
.top nav a{color:var(--muted);text-decoration:none}.top nav a:hover{color:var(--title)}
.btn{display:inline-block;background:linear-gradient(#f3c157,#c9861f);color:#2a1606!important;font-weight:700;text-decoration:none;
  padding:10px 20px;border-radius:12px;box-shadow:0 2px 0 #7a4a10}
.hero{padding:48px 16px 44px;text-align:center;background-size:cover;background-position:center}
.hero .wapen{width:110px;filter:drop-shadow(0 4px 12px #000)}
h1{font-weight:700;font-size:clamp(34px,6vw,56px);margin:8px 0 0;color:var(--title);text-shadow:0 3px 10px #000;letter-spacing:.02em}
.lore{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:15px;margin:4px 0 14px}
.tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.tags span{background:#000a;border:1px solid var(--gold);color:var(--title);border-radius:99px;padding:3px 12px;font-weight:700;font-size:15px}
main{max-width:1040px;margin:0 auto;padding:8px 16px 40px}
main.tekst{max-width:760px}
h2{display:flex;align-items:center;gap:14px;color:var(--title);font-size:24px;margin:40px 0 16px}
h2::before{content:"";flex:none;width:10px;height:10px;transform:rotate(45deg);background:var(--gold);box-shadow:0 0 8px var(--gold)}
h2::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,#8a6326,transparent)}
.intro{font-size:19px;max-width:760px}
.blok{position:relative;border:34px solid transparent;border-image:url(img/rand.png) 75 / 34px / 0 stretch;
  background:radial-gradient(120% 90% at 50% 0%,#2b2219 0%,#1a1511 70%) center/calc(100% - 34px) calc(100% - 34px) no-repeat border-box}
.blok::before,.blok::after{content:"";position:absolute;left:50%;width:36px;height:34px;margin-left:-18px;background:center/contain no-repeat}
.blok::before{top:-34px;background-image:url(img/rand_boven.png)}.blok::after{bottom:-34px;background-image:url(img/rand_onder.png)}
.kws,.sw{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.kw{display:grid;grid-template-columns:60px 1fr;gap:2px 14px;align-items:center;padding:4px}
.kw img{grid-row:span 2;width:60px;height:60px;filter:drop-shadow(0 3px 6px #000)}
.kw b{color:var(--gold);font-size:20px;letter-spacing:.03em}
.sw h3{margin:-4px -4px 10px;padding:8px 14px;font-size:17px;letter-spacing:.06em;border-bottom:1px solid var(--line)}
.sw .goed h3{background:linear-gradient(90deg,#2f4a24,transparent);color:#cfe9a8}
.sw .zwak h3{background:linear-gradient(90deg,#4f2222,transparent);color:#f2b8a8}
.sw ul{list-style:none;padding:0 6px;margin:0}.sw li{position:relative;padding-left:20px;margin:6px 0}
.sw li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;transform:rotate(45deg)}
.sw .goed li::before{background:#9fd36a}.sw .zwak li::before{background:#e4735a}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
.card{margin:0}.card img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 10px #000c)}
.card figcaption{font-size:14.5px;color:var(--muted);background:var(--panel);border:1px solid #3a2b17;border-top:2px solid #8a6326;
  border-radius:0 0 6px 6px;padding:8px 10px;margin-top:-4px}
.card b{color:var(--text);font-size:16px;display:block}.st{display:block;color:var(--gold);font-weight:700}
.cta{text-align:center;margin-top:70px;padding:0 8px 6px}.cta .wapen{width:72px;margin-top:-66px;filter:drop-shadow(0 4px 10px #000)}
.cta p{margin:6px 0 14px;font-size:19px}
.facs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.fac{display:flex;flex-direction:column;align-items:center;width:104px;padding:8px 4px;border-radius:8px;text-decoration:none;
  color:var(--text);font-weight:700;text-align:center}
.fac:hover{background:#2b2219}.fac img{width:72px;filter:drop-shadow(0 3px 6px #000)}
footer{text-align:center;color:var(--muted);font-size:14px;padding:24px 16px;border-top:1px solid #3a2b17}
footer a{margin:0 6px}
.voor{text-align:center;padding:0 0 30px;background:radial-gradient(90% 70% at 50% 0%,#2b2219,var(--bg) 70%)}
.voor .beeld{display:block;width:100%;max-width:1200px;height:auto;margin:0 auto;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.voor h1{font-size:clamp(26px,4.4vw,44px);margin:-10px 16px 8px}.voor .intro{margin:0 auto 22px;padding:0 16px}
.btn.groot{font-size:22px;padding:14px 34px;border-radius:14px}.klein{color:var(--muted);font-size:15px;margin:12px 0 0}
.stappen{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.stap{text-align:center}
.stap img{display:block;width:100%;height:auto;border-radius:16px;border:2px solid #8a6326;box-shadow:0 10px 26px #000c;margin-bottom:12px}
.stap h3{font-family:Cinzel,Georgia,serif;color:var(--gold);margin:0 0 4px;font-size:18px}.stap p{margin:0;font-size:16px;color:var(--muted)}
.facs.groot .fac{width:150px}.fac small{color:var(--muted);font-weight:400;font-family:Alegreya,Georgia,serif;font-size:14px}
.feats{list-style:none;margin:0;padding:0 6px}.feats li{position:relative;padding-left:22px;margin:8px 0}
.feats li::before{content:"";position:absolute;left:2px;top:.6em;width:9px;height:9px;transform:rotate(45deg);background:var(--gold)}
@media(max-width:860px){.stappen{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:10px;margin:0 -16px;padding-left:16px;padding-right:16px}
.stap{flex:0 0 62%;scroll-snap-align:center}}
@media(max-width:560px){.facs.groot .fac{width:46%}.top nav a:not(.btn){display:none}.cards{grid-template-columns:repeat(2,1fr)}.hero{padding-top:36px}}