/* urenregistratiepersoneel.eu */
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-display: swap; font-weight: 400; src:url(fonts/instrument-serif-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-display: swap; font-weight: 400; src:url(fonts/instrument-serif-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Work Sans Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src:url(fonts/work-sans-latin-wght-normal.woff2) format('woff2-variations'); }
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body{margin:0;overflow-x:clip}
a{transition:color .2s,background-color .2s,border-color .2s,transform .2s,box-shadow .2s}
h1,h2,strong{overflow-wrap:break-word;hyphens:auto}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Scandinavisch minimal — haarlijnen, veel wit, Instrument Serif + Work Sans */
:root{--ink:#1b1b1a;--muted:#7a766e;--bg:#f6f5f1;--line:#d9d6ce;--accent:#8a9b7c;--serif:'Instrument Serif',Georgia,serif;--sans:'Work Sans Variable',system-ui,sans-serif}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.75;font-weight:350}
a{color:var(--ink);text-decoration-color:var(--accent);text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{color:var(--accent)}
nav{display:flex;align-items:baseline;gap:36px;flex-wrap:wrap;padding:34px max(24px,calc((100% - 1200px)/2)) 28px;border-bottom:1px solid var(--line)}
nav a{text-decoration:none;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:450;color:var(--muted)}
nav a:hover{color:var(--ink)}
nav a:first-child{margin-right:auto;text-transform:none;letter-spacing:-.01em;font-family:var(--serif);font-size:1.6rem;color:var(--ink);font-weight:400}
main{max-width:1200px;margin:0 auto;padding:0 24px}
.kicker{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:450}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1}
.hero{display:grid;grid-template-columns:240px 1fr;gap:0 40px;padding:120px 0 96px;border-bottom:1px solid var(--line)}
.hero .kicker{grid-row:1/3;padding-top:22px;border-top:1px solid var(--ink);align-self:start}
.hero h1{font-size:clamp(3.6rem,10vw,8.6rem);margin:0 0 .25em}
.hero h1::after{content:".";color:var(--accent)}
.hero p{grid-column:2;font-size:1.3rem;color:var(--muted);max-width:620px;margin:0;font-weight:300}
.cards{counter-reset:c;display:block;margin-top:24px}
.card{counter-increment:c;display:grid;grid-template-columns:240px 1fr 1fr 40px;gap:40px;align-items:baseline;padding:34px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.card::before{content:"(" counter(c,decimal-leading-zero) ")";font-size:.8rem;letter-spacing:.1em;color:var(--muted)}
.card strong{font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1.1}
.card span{color:var(--muted);font-size:.95rem}
.card::after{content:"→";font-size:1.3rem;transition:transform .3s;justify-self:end}
.card:hover{color:var(--ink);padding-left:12px;background:linear-gradient(90deg,rgba(138,155,124,.08),transparent)}
.card:hover::after{transform:translateX(6px);color:var(--accent)}
.linkbox{display:grid;grid-template-columns:240px 1fr;gap:10px 40px;margin-top:96px}
.linkbox h2{grid-column:1;font-family:var(--sans);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:450;color:var(--muted);margin:0;padding-top:16px;border-top:1px solid var(--ink)}
.linkbox p{grid-column:2;margin:0 0 32px;font-family:var(--serif);font-size:1.5rem;line-height:1.5;padding-top:8px}
.linkbox p a{text-decoration:none;border-bottom:1px solid var(--line)}
.linkbox p a:hover{border-color:var(--accent)}
article{display:grid;grid-template-columns:240px minmax(0,680px);gap:0 40px;margin:96px 0 0}
article>*{grid-column:2}
article .kicker{grid-column:1;grid-row:1/3;align-self:start;padding-top:16px;border-top:1px solid var(--ink);position:sticky;top:24px}
article h1{font-size:clamp(2.8rem,6.5vw,5rem);margin:0 0 .4em}
.lead{font-size:1.4rem;line-height:1.55;font-weight:300;color:#3d3b37;margin-bottom:1.5em}
article h2{font-size:2.2rem;margin:1.8em 0 .45em;font-style:italic}
article ul{list-style:none;padding:0;border-top:1px solid var(--line)}
article li{margin:0;padding:16px 0 16px 34px;border-bottom:1px solid var(--line);position:relative}
article li::before{content:"";position:absolute;left:0;top:28px;width:16px;height:1px;background:var(--accent)}
aside{margin-top:56px;padding:32px 0 0;border-top:1px solid var(--ink);font-size:.95rem;line-height:2.1;color:var(--muted)}
aside strong{display:inline-block;font-family:var(--serif);font-size:1.6rem;font-weight:400;color:var(--ink);margin-bottom:6px}
footer{max-width:1200px;margin:120px auto 0;padding:28px 24px 64px;display:flex;justify-content:space-between;gap:20px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line)}
footer span:first-child{color:var(--ink)}
@media(max-width:900px){.hero,.linkbox,article{grid-template-columns:1fr}.hero{padding:72px 0 56px}.hero .kicker,article .kicker{grid-row:auto;position:static;margin-bottom:24px;border-top:0;padding-top:0}.hero p,.linkbox p,.linkbox h2{grid-column:1}article>*,article .kicker{grid-column:1}
  .card{grid-template-columns:1fr 24px;gap:8px 16px}.card::before{grid-column:1/-1}.card span{grid-column:1}.card::after{grid-row:2;grid-column:2}article{margin-top:56px}nav{gap:22px}nav a:first-child{flex-basis:100%;margin-bottom:6px}footer{flex-direction:column;margin-top:72px}}