:root{
  --ink:#15171a; --ink-2:#3d4249; --ink-3:#6a7078;
  --paper:#f6f4ef; --card:#ffffff; --line:#ded8cc;
  --accent:#e6a400; --accent-dark:#9a6d00; --steel:#2b3440; --red:#b23a2e;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.62;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent)}
a:hover{border-bottom-width:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px}

/* kop */
.masthead{background:var(--steel);color:#fff;border-bottom:5px solid var(--accent)}
.masthead a{color:#fff;border:0}
.mh{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px 0;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:12px}
.brand .mark{font-family:var(--mono);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent)}
.brand .name{font-size:23px;font-weight:800;letter-spacing:-.02em}
.mainnav{display:flex;gap:22px;flex-wrap:wrap;font-size:14.5px;
  text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.mainnav a{opacity:.86;padding:4px 0;border-bottom:2px solid transparent}
.mainnav a:hover{opacity:1;border-bottom-color:var(--accent)}

/* kruimels */
.crumbs{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);
  padding:16px 0 0;letter-spacing:.03em}
.crumbs a{border:0;color:var(--ink-3)}
.crumbs a:hover{color:var(--ink)}

/* hero */
.hero{padding:56px 0 46px;border-bottom:1px solid var(--line);position:relative;
  overflow:hidden}
.hero::after{content:"";position:absolute;right:-90px;top:-40px;width:340px;height:340px;
  background:repeating-linear-gradient(135deg,var(--accent) 0 3px,transparent 3px 16px);
  opacity:.16;transform:rotate(8deg);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(30px,4.6vw,50px);line-height:1.08;margin:0 0 18px;
  letter-spacing:-.025em;max-width:19ch}
.hero .lead{font-size:19.5px;color:var(--ink-2);max-width:62ch;margin:0}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-dark);margin:0 0 14px}

h1{font-size:clamp(27px,3.6vw,40px);line-height:1.14;letter-spacing:-.022em;margin:26px 0 16px}
h2{font-size:clamp(21px,2.5vw,27px);line-height:1.22;letter-spacing:-.015em;
  margin:44px 0 12px;padding-top:16px;border-top:1px solid var(--line)}
h3{font-size:19px;margin:26px 0 8px;letter-spacing:-.01em}
p{margin:0 0 16px}
main{padding-bottom:64px}
.section{padding:34px 0}

/* genummerde rijen */
.rows{counter-reset:r;margin:22px 0;border-top:1px solid var(--line);padding:0}
.rows > li{counter-increment:r;list-style:none;display:grid;
  grid-template-columns:56px minmax(0,1fr);column-gap:18px;padding:18px 0;
  border-bottom:1px solid var(--line)}
.rows > li::before{content:counter(r,decimal-leading-zero);grid-column:1;grid-row:1;
  font-family:var(--mono);font-size:13px;color:var(--accent-dark);padding-top:6px}
.rows > li > *{grid-column:2}
.rows h3{margin:0 0 6px}
.rows p{margin:0;color:var(--ink-2);font-size:16px}
ul.rows{padding:0}

/* index-lijst */
.idx{list-style:none;padding:0;margin:22px 0;border-top:1px solid var(--line)}
.idx li{border-bottom:1px solid var(--line)}
.idx a{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;
  padding:15px 2px;border:0}
.idx a:hover{background:#efeade}
.idx .t{font-weight:700}
.idx .d{color:var(--ink-3);font-size:14.5px;text-align:right;max-width:46ch}
.idx .t{position:relative}
.idx a:hover .t{color:var(--accent-dark)}
@media(max-width:640px){.idx a{grid-template-columns:1fr}.idx .d{text-align:left}}

/* tabel */
.tbl{width:100%;border-collapse:collapse;margin:22px 0;font-size:15.5px}
.tbl th{background:var(--steel);color:#fff;text-align:left;padding:11px 13px;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.tbl td{padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:nth-child(even) td{background:#fbf9f5}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* kaders */
.note{border-left:4px solid var(--accent);background:#fdf7e6;padding:16px 18px;margin:22px 0}
.warn{border-left:4px solid var(--red);background:#fbeeec;padding:16px 18px;margin:22px 0}
.note p:last-child,.warn p:last-child{margin:0}
.note strong,.warn strong{display:block;margin-bottom:4px}

/* winkelkader */
.shop{border:1px solid var(--line);background:var(--card);padding:20px 22px;margin:30px 0}
.shop .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.shop p{margin:0 0 10px;font-size:16px;color:var(--ink-2)}
.shop p:last-child{margin:0}
.shop ul{list-style:none;padding:0;margin:0}
.shop li{padding:7px 0;border-top:1px dotted var(--line)}
.shop li a{font-weight:700;font-size:15.5px;word-break:break-word}
.shop li::before{content:"\2192";color:var(--accent-dark);margin-right:9px;
  font-family:var(--mono)}

/* specificatiestrook */
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin:24px 0}
.spec div{background:var(--card);padding:14px 16px}
.spec dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 4px}
.spec dd{margin:0;font-size:16.5px;font-weight:700}

/* hulpmiddel */
.tool{border:1px solid var(--line);background:var(--card);padding:22px;margin:26px 0}
.tool label{display:block;font-size:14px;font-weight:700;margin:14px 0 6px}
.tool select,.tool input{width:100%;padding:10px 12px;border:1px solid var(--line);
  background:var(--paper);font:inherit;font-size:16px;border-radius:0}
.tool button{margin-top:18px;background:var(--steel);color:#fff;border:0;
  padding:12px 22px;font:inherit;font-weight:700;cursor:pointer;
  text-transform:uppercase;letter-spacing:.08em;font-size:14px}
.tool button:hover{background:var(--accent-dark)}
.out{margin-top:20px;border-top:2px solid var(--accent);padding-top:16px}
.out:empty{display:none}
.bar{height:9px;background:#e6e0d3;margin:6px 0 12px;position:relative}
.bar i{display:block;height:100%;background:var(--accent)}

/* nieuws */
.arts{list-style:none;padding:0;margin:22px 0}
.arts li{border-bottom:1px solid var(--line);padding:18px 0}
.arts time{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);
  display:block;margin-bottom:5px;letter-spacing:.04em}
.arts a{font-size:19px;font-weight:700;border:0}
.arts a:hover{border-bottom:2px solid var(--accent)}
.arts p{margin:6px 0 0;color:var(--ink-2);font-size:16px}

/* begrippen */
.gloss{margin:22px 0}
.gloss dt{font-weight:800;margin-top:20px;font-size:17.5px}
.gloss dd{margin:4px 0 0;color:var(--ink-2)}

/* voet */
footer{background:var(--steel);color:#c9cfd6;margin-top:60px;padding:40px 0 30px;
  font-size:14.5px}
footer a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:28px}
.fgrid h4{color:#fff;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 10px;font-family:var(--mono)}
.fgrid ul{list-style:none;padding:0;margin:0}
.fgrid li{margin-bottom:6px}
.fbot{border-top:1px solid rgba(255,255,255,.15);margin-top:28px;padding-top:18px;
  font-size:13px;color:#98a1ab}