:root{
  --paper:#E7EAF0; --card:#F7F9FC; --ink:#131C27; --woad:#1F3F66;
  --thread:#A9B9CD; --madder:#93412F; --muted:#66788C; --line:#CBD5E1;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --cond:'IBM Plex Sans Condensed','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink); font-family:var(--serif);
  font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:980px;margin:0 auto;padding:0 20px 120px}

/* ---------- kop ---------- */
header{padding:56px 0 28px;border-bottom:1px solid var(--line)}
.eyebrow{font-family:var(--cond);text-transform:uppercase;letter-spacing:.18em;
  font-size:11px;font-weight:600;color:var(--woad)}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(30px,5.4vw,52px);
  line-height:1.05;margin:14px 0 6px;letter-spacing:-.015em}
h1 em{font-style:italic;color:var(--woad)}
.sub{color:var(--muted);max-width:60ch;margin:0 0 26px;font-size:16.5px}
.facts{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line)}
.fact{flex:1 1 130px;padding:12px 16px 12px 0;border-right:1px solid var(--line)}
.fact:last-child{border-right:0}
.fact b{display:block;font-family:var(--mono);font-size:19px;font-weight:500;color:var(--woad)}
.fact span{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:10.5px;color:var(--muted)}

/* ---------- bediening ---------- */
.bar{position:sticky;top:0;z-index:20;background:var(--paper);
  padding:12px 0;border-bottom:1px solid var(--line);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search{flex:1 1 240px;position:relative}
.search input{width:100%;font-family:var(--serif);font-size:15px;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:2px;
  padding:9px 12px 9px 32px}
.search input:focus{outline:2px solid var(--woad);outline-offset:1px;border-color:transparent}
.search svg{position:absolute;left:10px;top:11px;opacity:.5}
button.ctl{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:11px;font-weight:600;color:var(--woad);background:transparent;
  border:1px solid var(--line);border-radius:2px;padding:9px 12px;cursor:pointer}
button.ctl:hover{background:var(--card);border-color:var(--woad)}
button.ctl:focus-visible{outline:2px solid var(--woad);outline-offset:1px}
.hits{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap;margin-left:auto;padding-right:2px}

/* ---------- boom ---------- */
.tree{margin-top:20px}
ul.gen{list-style:none;margin:0;padding:0 0 0 20px;position:relative}
ul.gen>li{position:relative}
/* de draad: stiksel tussen de generaties */
ul.nest{margin-left:9px;padding-left:22px;
  background-image:repeating-linear-gradient(to bottom,var(--thread) 0 4px,transparent 4px 8px);
  background-size:1px 100%;background-repeat:no-repeat;background-position:0 0}
ul.nest>li::before{content:"";position:absolute;left:-22px;top:16px;width:16px;height:1px;
  background:var(--thread)}
ul.nest>li.grp::before{display:none}
li.hidden{display:none}

.row{display:flex;align-items:baseline;gap:9px;padding:4px 6px 4px 0;border-radius:2px;
  cursor:pointer;position:relative}
.row:hover{background:rgba(31,63,102,.06)}
.row.sel{background:rgba(31,63,102,.10)}
.row:focus-visible{outline:2px solid var(--woad);outline-offset:1px}
.tw{flex:0 0 16px;width:16px;height:16px;align-self:center;border:0;background:transparent;
  padding:0;cursor:pointer;color:var(--woad);font-family:var(--mono);font-size:11px;line-height:1}
.tw.leaf{color:var(--thread);cursor:default}
.nm{font-size:16.5px}
.row.open>.nm{font-weight:600}
.yrs{font-family:var(--mono);font-size:12.5px;color:var(--woad);white-space:nowrap}
.pl{font-family:var(--cond);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.cnt{font-family:var(--mono);font-size:11px;color:var(--muted);opacity:.75}
mark{background:rgba(147,65,47,.18);color:var(--madder);padding:0 1px;border-radius:1px}

.grp{font-family:var(--cond);font-size:11.5px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--muted);padding:9px 0 3px 0}
.grp b{font-weight:600;color:var(--woad);letter-spacing:.06em}

/* ---------- kaart ---------- */
.card{position:fixed;right:0;bottom:0;width:min(420px,100%);max-height:62vh;overflow:auto;
  background:var(--card);border-top:1px solid var(--woad);border-left:1px solid var(--line);
  padding:20px 22px 26px;box-shadow:0 -8px 30px rgba(19,28,39,.12);transform:translateY(101%);
  visibility:hidden;transition:transform .22s ease,visibility .22s;z-index:40}
.card.on{transform:translateY(0);visibility:visible}
.card .reg{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.04em}
.card h2{font-family:var(--serif);font-weight:600;font-size:23px;margin:4px 0 12px;line-height:1.15}
.card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:14.5px}
.card dt{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;
  color:var(--muted);padding-top:4px}
.card dd{margin:0;font-family:var(--mono);font-size:13px}
.card .src{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:14px;color:#33414F;font-style:italic}
.card .close{position:absolute;top:12px;right:14px;border:0;background:transparent;
  font-family:var(--mono);font-size:18px;color:var(--muted);cursor:pointer;line-height:1}
.card .close:focus-visible{outline:2px solid var(--woad)}

footer{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted);max-width:66ch}
footer code{font-family:var(--mono);font-size:12px}

@media (max-width:640px){
  .pl{display:none}
  .wrap{padding:0 14px 120px}
  ul.gen{padding-left:10px}
  ul.nest{margin-left:5px;padding-left:13px}
  ul.nest>li::before{left:-13px;width:9px}
  .nm{font-size:15.5px}
  .fact{flex-basis:45%}
  header{padding-top:34px}
  .card{max-height:70vh}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}