:root{
  --gold:#C9A84C; --gold-light:#E8C96A;
  --black:#0e0e0d; --black-2:#161614; --black-3:#1e1e1b;
  --gray:#888780; --gray-light:#b4b2a9; --white:#f7f5ef;
  --line:rgba(201,168,76,0.15); --line-soft:rgba(201,168,76,0.08);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{overflow-x:hidden;background:var(--black);color:var(--white);font-family:var(--sans);font-weight:300;
  line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:var(--gold-light)}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem 2rem;background:rgba(14,14,13,.94);backdrop-filter:blur(20px);
  border-bottom:.5px solid var(--line)}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-mark{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);flex:none}
.nav-wordmark{font-family:var(--serif);font-size:1.2rem;letter-spacing:4px;color:var(--gold-light)}
.nav-back{font-size:.75rem;letter-spacing:2px;text-transform:uppercase;color:var(--gray);text-decoration:none}
.nav-back:hover{color:var(--gold-light)}

.doc{max-width:780px;margin:0 auto;padding:4.5rem 2rem 6rem}
.doc-label{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;letter-spacing:3px;
  color:var(--gold);text-transform:uppercase;margin-bottom:1.5rem}
.doc-label::before{content:'';width:24px;height:.5px;background:var(--gold)}
.doc h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.5vw,3rem);
  line-height:1.1;letter-spacing:-.01em;margin-bottom:1rem}
.doc-meta{font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--gray);
  padding-bottom:2.5rem;margin-bottom:2.5rem;border-bottom:.5px solid var(--line)}
.doc h2{font-family:var(--serif);font-weight:400;font-size:1.6rem;line-height:1.2;
  margin:3rem 0 1rem;color:var(--white)}
.doc h3{font-family:var(--sans);font-weight:500;font-size:1rem;margin:1.8rem 0 .6rem;color:var(--gold-light)}
.doc p{font-size:.98rem;color:var(--gray-light);margin-bottom:1.1rem}
.doc ul,.doc ol{margin:0 0 1.3rem 1.1rem}
.doc li{font-size:.98rem;color:var(--gray-light);margin-bottom:.5rem;padding-left:.4rem}
.doc strong{color:var(--white);font-weight:500}
.doc table{width:100%;border-collapse:collapse;margin:1.2rem 0 1.6rem;font-size:.9rem}
.doc th,.doc td{text-align:left;padding:.75rem .8rem;border-bottom:.5px solid var(--line-soft);
  color:var(--gray-light);vertical-align:top}
.doc th{font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:500}
.callout{border-left:2px solid var(--gold);background:var(--black-2);padding:1.2rem 1.4rem;margin:1.5rem 0}
.callout p{margin:0;font-size:.92rem}
.todo{border:.5px dashed rgba(201,168,76,.4);background:rgba(201,168,76,.04);padding:1.2rem 1.4rem;margin:1.5rem 0}
.todo p{margin:0;font-size:.88rem;color:var(--gold-light)}
.doc-foot{margin-top:4rem;padding-top:2rem;border-top:.5px solid var(--line);
  font-size:.78rem;letter-spacing:1px;color:var(--gray)}
.doc-foot a{text-decoration:none}

@media(max-width:640px){
  nav{padding:.9rem 1.15rem}
  .nav-wordmark{font-size:1.05rem;letter-spacing:3px}
  .nav-back{font-size:.68rem}
  .doc{padding:2.5rem 1.15rem 3.5rem}
  .doc table{font-size:.82rem;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .doc th,.doc td{padding:.6rem .5rem;white-space:nowrap}
  .doc h1{font-size:1.9rem}
  .doc h2{font-size:1.3rem;margin-top:2.2rem;padding-top:1.6rem}
  .doc-foot{flex-direction:column;gap:1rem;padding:2rem 1.15rem}
}
@media(max-width:420px){
  .doc{padding:2rem 1rem 3rem}
  .doc h1{font-size:1.7rem}
}
.doc h1,.doc h2,.doc h3,.doc p,.doc li{overflow-wrap:break-word;hyphens:auto}


/* ---------- NAVIGATIE OP SUBPAGINAS ---------- */
.nav-links{display:flex;gap:2.2rem;align-items:center;list-style:none}
.nav-links a{text-decoration:none;color:var(--gray-light);font-size:.85rem;letter-spacing:.5px;transition:color .2s}
.nav-links a:hover{color:var(--gold-light)}
.nav-links .here{color:var(--gold-light)}
.nav-links .cta{color:var(--gold-light);border-bottom:1px solid rgba(201,168,76,.4);padding-bottom:3px}
.burger{display:none;background:none;border:none;padding:.6rem;cursor:pointer}
.burger i{display:block;width:22px;height:1px;background:var(--gold-light);transition:.3s}
.burger i+i{margin-top:6px}
.burger.on i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{display:none;position:fixed;inset:58px 0 0;z-index:99;background:var(--black);
  padding:3rem 2rem;text-align:center;overflow-y:auto}
.drawer.on{display:block}
.drawer a{display:block;padding:1.3rem 0;text-decoration:none;color:var(--gray-light);
  font-family:var(--serif);font-size:1.75rem}
.drawer a.cta{color:var(--gold-light)}
@media(max-width:820px){
  .nav-links{display:none}
  .burger{display:block}
}