/* urenschrijven.nl */
@font-face { font-family: 'Caveat Variable'; font-style: normal; font-display: swap; font-weight: 400 700; src:url(fonts/caveat-latin-wght-normal.woff2) format('woff2-variations'); }
@font-face { font-family: 'Lora Variable'; font-style: normal; font-display: swap; font-weight: 400 700; src:url(fonts/lora-latin-wght-normal.woff2) format('woff2-variations'); }
@font-face { font-family: 'Lora Variable'; font-style: italic; font-display: swap; font-weight: 400 700; src:url(fonts/lora-latin-wght-italic.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}}
/* Schrift — gelinieerd papier, handschrift, systeemkaartjes, vulpeninkt */
:root{--ink:#1f2a44;--pen:#1f45a8;--paper:#fcfbf6;--rule:#dbe4f3;--margin:#f0a3a3;--muted:#5d6479;--note1:#fff3a6;--note2:#ffd6e0;--note3:#d2ecff;--hand:'Caveat Variable','Segoe Print',cursive;--serif:'Lora Variable',Georgia,serif}
body{background:#efe9dc;color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.75;
  background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:5px 5px}
a{color:var(--pen);text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{color:#c0392b}
nav{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding:18px max(20px,calc((100% - 1100px)/2));background:var(--ink)}
nav a{color:#e9ecf5;text-decoration:none;font-family:var(--hand);font-size:1.45rem;font-weight:600;line-height:1}
nav a:hover{color:var(--note1);transform:rotate(-2deg)}
nav a:first-child{margin-right:auto;font-size:1.9rem;font-weight:700;color:#fff}
nav a:first-child::before{content:"✎ ";color:var(--note1)}
main{max-width:1100px;margin:0 auto;padding:0 20px}
.kicker{font-family:var(--hand);font-size:1.6rem;font-weight:600;color:#c0392b;line-height:1.2;transform:rotate(-1.5deg);display:table}
.hero .kicker{margin:0 auto}
h1,h2{font-weight:700;letter-spacing:-.015em;line-height:1.12}
.hero{padding:76px 0 40px;text-align:center}
.hero h1{font-size:clamp(3rem,8.5vw,6rem);margin:.15em 0 .3em;display:inline-block;background:linear-gradient(transparent 62%,rgba(255,226,80,.75) 62% 88%,transparent 88%);padding:0 .1em}
.hero p{font-size:1.25rem;color:var(--muted);max-width:640px;margin:0 auto;font-style:italic}
.cards{counter-reset:c;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;padding:40px 10px}
.card{counter-increment:c;position:relative;display:flex;flex-direction:column;padding:40px 26px 28px;text-decoration:none;color:var(--ink);background:var(--note1);box-shadow:0 1px 1px rgba(0,0,0,.08),0 14px 22px -12px rgba(0,0,0,.35);transform:rotate(-2deg)}
.card:nth-child(2){background:var(--note2);transform:rotate(1.5deg) translateY(10px)}
.card:nth-child(3){background:var(--note3);transform:rotate(-1deg)}
.card::before{content:"";position:absolute;top:-14px;left:50%;width:96px;height:28px;margin-left:-48px;background:rgba(255,255,255,.55);box-shadow:0 1px 2px rgba(0,0,0,.12);transform:rotate(-3deg)}
.card::after{content:"nr. " counter(c);position:absolute;top:10px;right:16px;font-family:var(--hand);font-size:1.3rem;color:rgba(31,42,68,.55)}
.card strong{font-family:var(--hand);font-size:1.9rem;font-weight:700;line-height:1.05}
.card span{margin-top:12px;font-size:.96rem;color:#3b4460}
.card:hover{transform:rotate(0) scale(1.03);z-index:1;color:var(--ink);box-shadow:0 1px 1px rgba(0,0,0,.08),0 26px 30px -14px rgba(0,0,0,.4)}
.linkbox{margin-top:40px;padding:36px 40px 36px 90px;background:var(--paper);position:relative;box-shadow:0 12px 30px -18px rgba(0,0,0,.35);
  background-image:linear-gradient(90deg,transparent 64px,var(--margin) 64px 66px,transparent 66px),repeating-linear-gradient(var(--paper) 0 31px,var(--rule) 31px 32px);line-height:32px}
.linkbox h2{font-family:var(--hand);font-size:2rem;margin:0;line-height:64px;color:#c0392b}
.linkbox p{margin:0 0 32px}
.linkbox p:last-child{margin:0}
article{max-width:820px;margin:56px auto 0;padding:64px 56px 56px 110px;background-color:var(--paper);position:relative;line-height:32px;font-size:17.5px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 24px 50px -24px rgba(0,0,0,.35);
  background-image:linear-gradient(90deg,transparent 78px,var(--margin) 78px 80px,transparent 80px),repeating-linear-gradient(transparent 0 31px,var(--rule) 31px 32px);background-position:0 17px}
article::before{content:"";position:absolute;left:28px;top:40px;bottom:40px;width:18px;background:radial-gradient(circle,#efe9dc 7px,rgba(0,0,0,.12) 7.5px 8px,transparent 8.5px) 0 0/18px 96px repeat-y}
article p,article ul{margin:0 0 32px}
article h1{font-size:clamp(2.2rem,5vw,3.3rem);line-height:1.1;margin:8px 0 32px}
.lead{font-size:1.2rem;font-style:italic;color:var(--pen)}
article h2{font-family:var(--hand);font-size:2.3rem;font-weight:700;line-height:32px;margin:64px 0 16px;color:#c0392b}
article ul{list-style:none;padding:0}
article li{position:relative;padding-left:30px;margin:0}
article li::before{content:"☐";position:absolute;left:0;color:var(--pen)}
aside{margin-top:48px;padding:26px 28px;background:var(--note1);transform:rotate(-.6deg);box-shadow:0 12px 20px -12px rgba(0,0,0,.35);line-height:1.9}
aside strong{font-family:var(--hand);font-size:1.7rem;font-weight:700}
footer{max-width:1100px;margin:64px auto 0;padding:26px 20px 56px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:.95rem;font-style:italic}
footer span:first-child{font-family:var(--hand);font-size:1.5rem;font-style:normal;font-weight:700;color:var(--ink)}
@media(max-width:820px){nav a:first-child{flex-basis:100%}.cards{grid-template-columns:1fr;gap:30px}.card,.card:nth-child(2),.card:nth-child(3){transform:rotate(-1deg)}.hero{padding:48px 0 20px}
  .linkbox{padding:28px 20px 28px 48px;background-image:linear-gradient(90deg,transparent 30px,var(--margin) 30px 32px,transparent 32px),repeating-linear-gradient(var(--paper) 0 31px,var(--rule) 31px 32px)}
  article{padding:40px 20px 36px 50px;background-image:linear-gradient(90deg,transparent 36px,var(--margin) 36px 38px,transparent 38px),repeating-linear-gradient(transparent 0 31px,var(--rule) 31px 32px)}article::before{left:10px;width:14px;background-size:14px 96px}footer{flex-direction:column}}