/* Moestuinvriend · Tuinschrift
   Een ruitjesschrift: de moestuinbak is een plattegrond van vakken van 30 × 30 cm,
   artikelen zijn vellen papier en de gewassen staan op systeemkaarten. */
:root{
  --paper:#F2F4EF; --sheet:#FDFDFA; --ink:#262826; --muted:#5F655E;
  --grid:#DCE6E0; --grid-2:#BFD2C8; --margin:#E07F78; --rule:#CADCE8;
  --label:#F2C335; --label-ink:#262826; --pencil:#4A4D49;
  --p-red:#C8463D; --p-green:#4E8B4A; --p-orange:#D9772B; --p-pink:#C2457A; --p-purple:#7A5A9E; --p-teal:#3D7F7A; --p-yellow:#C99A1E; --p-soil:#8A6A4A;
  --f-head:"Young Serif",Georgia,serif;
  --f-body:"Newsreader",Georgia,"Times New Roman",serif;
  --f-hand:"Kalam","Comic Sans MS",cursive;
  --f-type:"Courier Prime","Courier New",ui-monospace,monospace;
  --wrap:76rem;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#17201C; --sheet:#1E2824; --ink:#E5E9E2; --muted:#A3ACA3; --grid:#212C27; --grid-2:#2D3C35; --margin:#D7716A; --rule:#2B3B44;
  --label:#E4B62C; --label-ink:#1E2824; --pencil:#C5CBC3;
  --p-red:#EE7B6F; --p-green:#8FC489; --p-orange:#EFA05A; --p-pink:#E58AB3; --p-purple:#B79BDA; --p-teal:#7BBDB5; --p-yellow:#E6C25A; --p-soil:#C9A27E; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#17201C; --sheet:#1E2824; --ink:#E5E9E2; --muted:#A3ACA3; --grid:#212C27; --grid-2:#2D3C35; --margin:#D7716A; --rule:#2B3B44;
  --label:#E4B62C; --label-ink:#1E2824; --pencil:#C5CBC3;
  --p-red:#EE7B6F; --p-green:#8FC489; --p-orange:#EFA05A; --p-pink:#E58AB3; --p-purple:#B79BDA; --p-teal:#7BBDB5; --p-yellow:#E6C25A; --p-soil:#C9A27E; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
[id]{scroll-margin-top:6rem}
body{margin:0;background-color:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:1.125rem;line-height:1.6;
  background-image:linear-gradient(var(--grid-2) 1px,transparent 1px),linear-gradient(90deg,var(--grid-2) 1px,transparent 1px),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px}
a{color:inherit}
:focus-visible{outline:2.5px dashed var(--p-red);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-head);font-weight:400;margin:0;text-wrap:balance;line-height:1.08}
.typed{font-family:var(--f-type);font-size:.875rem;letter-spacing:.01em}
.hand{font-family:var(--f-hand);color:var(--p-red);line-height:1.2}
.sheet{background:var(--sheet);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 8%,transparent),0 10px 28px -16px color-mix(in srgb,var(--ink) 40%,transparent)}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:-999px;top:0;z-index:50;background:var(--label);color:var(--label-ink);padding:.5rem 1rem;font-family:var(--f-type)}
.skip:focus{left:16px;top:8px}

/* kop */
.head{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1.5px solid var(--grid-2);padding-top:env(safe-area-inset-top,0px)}
.head .wrap{display:flex;align-items:center;gap:.5rem 1.5rem;flex-wrap:wrap;padding-block:.8rem}
.logo{display:flex;align-items:baseline;gap:.6rem;text-decoration:none}
.logo b{font-family:var(--f-head);font-weight:400;font-size:1.55rem;letter-spacing:-.01em}
.logo span{font-family:var(--f-hand);color:var(--p-green);font-size:1rem;rotate:-4deg;display:inline-block;white-space:nowrap}
.menu{display:flex;gap:1.3rem;margin-left:auto;font-family:var(--f-type);font-size:.95rem;flex-wrap:wrap}
.menu a{text-decoration:none;padding-block:.2rem;background-repeat:no-repeat;background-position:0 100%;background-size:0 6px}
.menu a:hover,.menu a[aria-current]{background-size:100% 6px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'><path d='M1 4 C 20 1, 35 6, 55 3 S 85 2, 99 4' fill='none' stroke='%23C8463D' stroke-width='1.8' stroke-linecap='round'/></svg>")}

/* plantlabel (de gele steker) */
.label{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-hand);font-weight:700;font-size:1.05rem;line-height:1;background:var(--label);color:var(--label-ink);padding:.6rem 1.4rem .55rem 1rem;clip-path:polygon(0 0,calc(100% - 1rem) 0,100% 50%,calc(100% - 1rem) 100%,0 100%);text-decoration:none;border:0;transition:translate .15s}
a.label:hover{translate:3px 0}
.label.sm{font-size:.85rem;padding:.3rem 1rem .25rem .6rem;clip-path:polygon(0 0,calc(100% - .65rem) 0,100% 50%,calc(100% - .65rem) 100%,0 100%);font-weight:400}

/* voorpagina */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:3rem;align-items:start;padding-block:3rem 3.5rem}
.stamp{display:inline-block;font-family:var(--f-type);font-size:.85rem;border:1.5px solid var(--p-red);color:var(--p-red);padding:.2rem .55rem;rotate:-1.5deg;margin-bottom:1.25rem}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.4rem)}
.u{position:relative;white-space:nowrap}
.u svg{position:absolute;left:-2%;bottom:-.18em;width:104%;height:.35em;overflow:visible}
.u path{fill:none;stroke:var(--p-green);stroke-width:3;stroke-linecap:round}
.hero .lede{font-size:1.2rem;max-width:32rem;margin:1.4rem 0 1.6rem}
.hero .acts{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center}
.hero .acts .txt{font-family:var(--f-type);font-size:.95rem}
.note{display:flex;gap:.6rem;align-items:flex-start;margin-top:2.25rem;max-width:22rem}
.note svg{flex:none;width:58px;height:44px;margin-top:-.25rem}
.note svg path{fill:none;stroke:var(--p-red);stroke-width:1.8;stroke-linecap:round}
.note p{margin:0;font-family:var(--f-hand);color:var(--p-red);font-size:1.15rem;line-height:1.2;rotate:-2deg}

/* plattegrond */
.plan-card{padding:1.25rem 1.25rem 1.5rem;rotate:.6deg;position:relative}
.plan-card::before{content:"";position:absolute;top:-14px;left:50%;width:110px;height:28px;translate:-50% 0;rotate:-3deg;background:color-mix(in srgb,var(--label) 55%,transparent)}
.plan-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.9rem;flex-wrap:wrap}
.plan-top .hand{font-size:1.05rem;color:var(--p-green)}
.bed-wrap{position:relative;padding:22px 26px 22px 22px}
.bed{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,auto);border:7px solid var(--p-soil);border-radius:3px;background:color-mix(in srgb,var(--p-soil) 10%,var(--sheet))}
.vb{position:relative;aspect-ratio:1;border-right:1.2px dashed color-mix(in srgb,var(--pencil) 45%,transparent);border-bottom:1.2px dashed color-mix(in srgb,var(--pencil) 45%,transparent);display:block}
.vb.c4{border-right:0}
.vb.r4{border-bottom:0}
.vb svg{position:absolute;inset:6%;width:88%;height:88%;overflow:visible}
.vb .nm{position:absolute;left:6%;bottom:3%;font-family:var(--f-hand);font-size:clamp(.7rem,1.25vw,.95rem);line-height:1;color:var(--ink);background:color-mix(in srgb,var(--sheet) 80%,transparent);padding:0 .15rem;pointer-events:none}
.vb.big{aspect-ratio:1}
.vb:hover,.vb.on{background:color-mix(in srgb,var(--label) 28%,transparent)}
.vb.on{outline:2.5px solid var(--p-red);outline-offset:-3px;z-index:1}
.dim{position:absolute;font-family:var(--f-hand);font-size:.95rem;color:var(--muted);display:flex;align-items:center;gap:.3rem}
.dim.top{top:0;left:22px;right:30px;justify-content:center}
.dim.top::before,.dim.top::after{content:"";flex:1;border-top:1px solid var(--muted)}
.dim.side{right:-4px;top:22px;bottom:22px;writing-mode:vertical-rl;justify-content:center}
.dim.side::before,.dim.side::after{content:"";flex:1;border-left:1px solid var(--muted)}
.north{position:absolute;right:2px;top:-4px;font-family:var(--f-hand);font-size:1rem;color:var(--ink);display:flex;flex-direction:column;align-items:center;line-height:1}
.pick{display:grid;grid-template-columns:88px minmax(0,1fr);gap:1rem;align-items:start;margin-top:1rem;padding-top:1rem;border-top:1.5px dashed var(--grid-2);min-height:8.5rem}
.pick .sym{width:88px;height:88px;border:1.5px solid var(--pencil);border-radius:2px;padding:6px}
.pick .sym svg{width:100%;height:100%;overflow:visible}
.pick h3{font-size:1.5rem}
.pick .typed{margin:.25rem 0 .35rem;color:var(--muted)}
.pick .hand{font-size:1.15rem;margin:0 0 .4rem}
.pick a{font-family:var(--f-type);font-size:.9rem}

/* secties */
.sec{padding-block:3.5rem 0}
.sec-h{display:flex;align-items:baseline;gap:.5rem 1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.sec-h h2{font-size:clamp(2rem,4vw,2.9rem)}
.sec-h .hand{font-size:1.2rem;rotate:-2deg;display:inline-block}
.more{margin:1.75rem 0 0}

/* leeslijst */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:3rem;align-items:start}
.todo{padding:1.5rem 1.5rem 1.25rem;list-style:none;margin:0;display:grid;gap:.15rem;rotate:-.5deg}
.todo li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.6rem;align-items:start;padding:.55rem 0;border-bottom:1px solid var(--rule);position:relative}
.todo li:last-child{border-bottom:0}
.todo input{position:absolute;opacity:0;width:1px;height:1px}
.todo label{cursor:pointer;grid-column:1}
.todo .box{width:1.6rem;height:1.6rem;margin-top:.1rem;display:block}
.todo .box path{fill:none;stroke:var(--pencil);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.todo .box .chk{stroke:var(--p-green);stroke-width:2.6;stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .35s}
.todo input:checked + .box .chk{stroke-dashoffset:0}
.todo input:focus-visible + .box{outline:2.5px dashed var(--p-red);outline-offset:2px}
.todo .t{font-family:var(--f-head);font-size:1.12rem;line-height:1.25;text-decoration:none}
.todo .t:hover{text-decoration:underline;text-decoration-color:var(--p-green);text-underline-offset:4px}
.todo .t small{display:block;font-family:var(--f-body);font-size:.95rem;color:var(--muted);margin-top:.15rem}
.todo li.done .t{text-decoration:line-through;text-decoration-color:var(--p-red);text-decoration-thickness:1.5px}
.todo-foot{display:flex;flex-wrap:wrap;gap:.2rem 1rem;justify-content:space-between;margin-top:.6rem;font-family:var(--f-type);font-size:.85rem;color:var(--muted)}

/* logboek (gelinieerd vel met kantlijn) */
.log{position:relative;padding:1.25rem 1.5rem 1rem 0}
.log::before{content:"";position:absolute;top:0;bottom:0;left:6.75rem;border-left:2px solid var(--margin);opacity:.8}
.entry{display:grid;grid-template-columns:6.75rem minmax(0,1fr) auto;gap:0 1.25rem;padding:.85rem 0;border-bottom:1px solid var(--rule);text-decoration:none;align-items:start}
.entry:last-child{border-bottom:0}
.entry .d{font-family:var(--f-type);font-size:.85rem;color:var(--muted);text-align:right;padding-right:.9rem;padding-top:.3rem}
.entry h3{font-size:1.25rem;line-height:1.2}
.entry p{margin:.2rem 0 0;color:var(--muted);font-size:1rem;line-height:1.45}
.entry .label{margin-top:.2rem}
.entry:hover h3{text-decoration:underline;text-decoration-color:var(--p-green);text-underline-offset:4px}
.yr{display:grid;grid-template-columns:6.75rem minmax(0,1fr);gap:0 1.25rem;padding:1.4rem 0 .2rem}
.yr:first-child{padding-top:.2rem}
.yr span{font-family:var(--f-hand);color:var(--p-red);font-size:1.6rem;line-height:1;text-align:right;padding-right:.9rem;rotate:-4deg}
.more-log{display:inline-block;margin:.9rem 0 0 8rem;font-family:var(--f-type);font-size:.95rem;text-underline-offset:4px}

/* teeltkaarten */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem 2rem;padding-top:1rem}
.card{position:relative;background:var(--sheet);padding:1.2rem 1.2rem 1rem;text-decoration:none;display:flex;flex-direction:column;
  background-image:linear-gradient(var(--margin),var(--margin)),repeating-linear-gradient(transparent 0 calc(1.75rem - 1px),var(--rule) calc(1.75rem - 1px) 1.75rem);
  background-size:100% 2px,100% 100%;background-position:0 4.75rem,0 4.75rem;background-repeat:no-repeat,no-repeat;
  box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 8%,transparent),0 12px 24px -16px color-mix(in srgb,var(--ink) 45%,transparent);transition:rotate .2s,translate .2s}
.cards .card:nth-child(3n+1){rotate:-.8deg}.cards .card:nth-child(3n+2){rotate:.5deg}.cards .card:nth-child(3n){rotate:-.3deg}
a.card:hover{rotate:0deg;translate:0 -4px}
.card::before{content:"";position:absolute;top:-11px;left:1.4rem;width:72px;height:22px;rotate:-4deg;background:color-mix(in srgb,var(--label) 55%,transparent)}
.card .ch{display:flex;justify-content:space-between;align-items:flex-start;height:3.55rem;margin:0}
.card h3{font-size:1.65rem;line-height:1.05}
.card .ch .no{font-family:var(--f-type);font-size:.8rem;color:var(--muted)}
.card .sym{position:absolute;right:1rem;top:5.2rem;width:64px;height:64px}
.card .sym svg{width:100%;height:100%;overflow:visible}
.card dl{margin:0;font-family:var(--f-type);font-size:.88rem;line-height:1.75rem;display:grid;grid-template-columns:auto minmax(0,1fr)}
.card dt{color:var(--muted);padding-right:.6rem}
.card dd{margin:0;padding-right:72px}
.card dd:nth-of-type(n+3){padding-right:0}
.card .cal{margin-top:.6rem}
.card .tip{margin:.55rem 0 0;font-family:var(--f-hand);font-size:1.15rem;color:var(--p-red);line-height:1.2;rotate:-1.5deg}
.card .fam{font-family:var(--f-body);font-style:italic;font-size:.95rem;color:var(--muted)}
.card[hidden]{display:none}
.cal{display:grid;grid-template-columns:2.4rem repeat(12,minmax(0,1fr));gap:2px;align-items:center;font-family:var(--f-type);font-size:.68rem;color:var(--muted)}
.cal .m{text-align:center}
.cal i{display:block;height:.75rem;border:1px solid color-mix(in srgb,var(--pencil) 50%,transparent)}
.cal i.b{background:repeating-linear-gradient(40deg,var(--c) 0 1.5px,transparent 1.5px 4px)}
.cal i.z{background:var(--c)}
.cal i.o{background:radial-gradient(circle,var(--c) 38%,transparent 42%)}
.tabs{display:flex;gap:.25rem;flex-wrap:wrap;border-bottom:1.5px solid var(--grid-2);margin-bottom:1.5rem}
.tabs[hidden]{display:none}
.tabs button{font:inherit;font-family:var(--f-type);font-size:.9rem;background:var(--sheet);color:var(--muted);border:1.5px solid var(--grid-2);border-bottom:0;border-radius:6px 6px 0 0;padding:.45rem .9rem .35rem;cursor:pointer;translate:0 1.5px}
.tabs button[aria-pressed="true"]{background:var(--label);border-color:var(--label);color:var(--label-ink);font-weight:700}
.page-h{padding-block:2.75rem 1.25rem;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2rem;align-items:end}
.page-h .kicker{color:var(--muted)}
.page-h h1{font-size:clamp(2.8rem,6vw,4.6rem);margin-top:.5rem}
.page-h p{max-width:36rem;margin:.75rem 0 0;font-size:1.15rem}
.page-h .hand{font-size:1.2rem;max-width:14rem;rotate:-3deg;text-align:right}
.fineprint{font-family:var(--f-type);font-size:.85rem;color:var(--muted);margin:2.5rem 0 0;max-width:44rem}

/* artikel */
.crumbs{font-family:var(--f-type);font-size:.85rem;color:var(--muted);padding-top:2rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.crumbs li+li::before{content:"/";margin-right:.35rem}
.ah{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem 3rem;align-items:end;padding-block:1.25rem 2rem}
.ah h1{font-size:clamp(3.6rem,9vw,6.5rem);line-height:.95}
.ah h1.long{font-size:clamp(2.3rem,5vw,3.9rem);line-height:1.05}
.ah .lede{font-size:1.25rem;max-width:36rem;margin:.9rem 0 0}
.ah .meta{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:1rem;color:var(--muted)}
.drawing{position:relative;width:220px;padding:26px 0 0 30px}
.drawing .box{width:190px;height:190px;border:1.5px solid var(--pencil);background:var(--sheet)}
.drawing .box svg{width:100%;height:100%;overflow:visible}
.drawing .d1{position:absolute;top:0;left:30px;width:190px;display:flex;align-items:center;gap:.3rem;font-family:var(--f-hand);font-size:.95rem;color:var(--muted)}
.drawing .d1::before,.drawing .d1::after{content:"";flex:1;border-top:1px solid var(--muted)}
.drawing .d2{position:absolute;left:0;top:26px;height:190px;writing-mode:vertical-rl;rotate:180deg;display:flex;align-items:center;gap:.3rem;font-family:var(--f-hand);font-size:.95rem;color:var(--muted)}
.drawing .d2::before,.drawing .d2::after{content:"";flex:1;border-left:1px solid var(--muted)}
.drawing .cap{font-family:var(--f-hand);color:var(--p-red);font-size:1.05rem;margin:.5rem 0 0;rotate:-2deg}
.spread{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,20rem);gap:3rem;align-items:start;padding-bottom:1rem}
.spread.solo{grid-template-columns:minmax(0,56rem)}
.pagesheet{position:relative;padding:2.25rem 2.5rem 2rem 0}
.pagesheet::before{content:"";position:absolute;top:0;bottom:0;left:11rem;border-left:2px solid var(--margin);opacity:.75}
.para{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:0 1.75rem}
.para .mn{padding:0 1rem 0 1.25rem;font-family:var(--f-hand);color:var(--p-red);font-size:1.05rem;line-height:1.2;text-align:right;rotate:-2deg;padding-top:.35rem}
.para .mn:empty{padding:0}
.para .tx{min-width:0;max-width:40rem}
.para h2{font-size:1.6rem;margin:1.75rem 0 .5rem}
.para h3{font-size:1.3rem;margin:1.5rem 0 .4rem}
.para:first-child h2,.para:first-child h3{margin-top:0}
.para p{margin:0 0 1rem}
.para ul,.para ol{margin:0 0 1rem;padding-left:1.25rem}
.para li{margin-bottom:.35rem}
.para li::marker{color:var(--p-red)}
.para a{text-decoration-color:var(--p-green);text-underline-offset:3px;text-decoration-thickness:1.5px}
.para a:hover{text-decoration-thickness:2.5px}
.para .tablewrap{overflow-x:auto;margin:0 0 1rem}
.para table{border-collapse:collapse;width:100%;font-size:1rem;line-height:1.45}
.para th,.para td{text-align:left;vertical-align:top;padding:.45rem .75rem .45rem 0;border-bottom:1px solid var(--rule)}
.para thead{display:none}
.para td:first-child{font-family:var(--f-type);font-size:.85rem;color:var(--muted);width:38%;padding-top:.55rem}
.aside{position:sticky;top:calc(env(safe-area-inset-top,0px) + 5.5rem)}
.aside .card{rotate:1deg}
.aside .hint{font-family:var(--f-type);font-size:.8rem;color:var(--muted);margin:.9rem 0 0}
.aside .hint a{color:inherit}
.related{padding:1.25rem 1.25rem 1rem;rotate:.6deg}
.related h2{font-size:1.35rem;margin-bottom:.5rem}
.related ul{list-style:none;margin:0;padding:0}
.related li{border-bottom:1px solid var(--rule)}
.related li:last-child{border-bottom:0}
.related a{display:block;padding:.6rem 0;text-decoration:none;font-family:var(--f-head);line-height:1.25}
.related a small{display:block;font-family:var(--f-type);font-size:.78rem;color:var(--muted);margin-bottom:.15rem}
.related a:hover span{text-decoration:underline;text-decoration-color:var(--p-green);text-underline-offset:4px}
.pager{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem 2rem;margin-top:2.5rem;padding-top:1.25rem;border-top:1.5px dashed var(--grid-2)}
.pager a{text-decoration:none;display:block}
.pager small{display:block;font-family:var(--f-type);font-size:.8rem;color:var(--muted)}
.pager span{font-family:var(--f-head);font-size:1.2rem;line-height:1.2}
.pager a:hover span{text-decoration:underline;text-decoration-color:var(--p-green);text-underline-offset:4px}
.pager .next{text-align:right;grid-column:2}

/* 404 */
.lost{padding-block:4rem 2rem;max-width:40rem}
.lost h1{font-size:clamp(2.8rem,6vw,4.6rem);margin:.75rem 0 1rem}
.lost p{font-size:1.2rem}

/* voet */
.foot{margin-top:5rem;border-top:1.5px solid var(--grid-2);background:color-mix(in srgb,var(--paper) 85%,transparent)}
.foot .wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:2rem;padding-block:2.5rem calc(2.5rem + env(safe-area-inset-bottom,0px))}
.foot b{font-family:var(--f-head);font-weight:400;font-size:1.4rem;display:block;margin-bottom:.4rem}
.foot p{margin:0;color:var(--muted);font-size:1rem;max-width:30rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;font-family:var(--f-type);font-size:.95rem}
.foot .muted{color:var(--muted)}

/* potloodlijnen in tekeningen */
.pen{fill:none;stroke:var(--pencil);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hf-red{fill:url(#h-red)}.hf-green{fill:url(#h-green)}.hf-orange{fill:url(#h-orange)}.hf-pink{fill:url(#h-pink)}.hf-purple{fill:url(#h-purple)}.hf-teal{fill:url(#h-teal)}.hf-yellow{fill:url(#h-yellow)}
.st-red{stroke:var(--p-red)}.st-green{stroke:var(--p-green)}.st-orange{stroke:var(--p-orange)}.st-pink{stroke:var(--p-pink)}.st-purple{stroke:var(--p-purple)}.st-teal{stroke:var(--p-teal)}.st-yellow{stroke:var(--p-yellow)}
.sf-red{fill:var(--p-red)}.sf-green{fill:var(--p-green)}.sf-orange{fill:var(--p-orange)}.sf-pink{fill:var(--p-pink)}.sf-purple{fill:var(--p-purple)}.sf-yellow{fill:var(--p-yellow)}
.pf-red{fill:var(--p-red)}.pf-green{fill:var(--p-green)}.pf-orange{fill:var(--p-orange)}.pf-pink{fill:var(--p-pink)}.pf-purple{fill:var(--p-purple)}.pf-teal{fill:var(--p-teal)}.pf-yellow{fill:var(--p-yellow)}
.fill-sheet{fill:var(--sheet)}

@media (max-width:62rem){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spread{grid-template-columns:minmax(0,1fr)}
  .aside{position:static;max-width:24rem}
}
@media (max-width:48rem){
  .hero,.two{grid-template-columns:minmax(0,1fr)}
  .hero{gap:2.5rem;padding-top:2rem}
  .plan-card{rotate:0deg;padding:1rem .75rem 1.25rem}
  .bed-wrap{padding:20px 22px 18px 4px}
  .dim.top{left:4px;right:22px}
  .menu{margin-left:0;width:100%;gap:1rem;font-size:.88rem}
  .logo b{font-size:1.35rem}
  .logo span{font-size:.85rem}
  .log::before{left:4.6rem}
  .entry{grid-template-columns:4.6rem minmax(0,1fr);gap:0 .9rem}
  .entry .d{padding-right:.5rem;font-size:.75rem}
  .entry .label{grid-column:2;justify-self:start;margin-top:.45rem}
  .yr{grid-template-columns:4.6rem minmax(0,1fr);gap:0 .9rem}
  .yr span{padding-right:.5rem;font-size:1.35rem}
  .more-log{margin-left:5.5rem}
  .cards{grid-template-columns:minmax(0,1fr)}
  .ah{grid-template-columns:minmax(0,1fr)}
  .ah h1{font-size:clamp(3rem,14vw,4.2rem)}
  .ah h1.long{font-size:clamp(2rem,8.5vw,2.8rem)}
  .drawing{justify-self:start}
  .pagesheet{padding:1.5rem 1rem 1.5rem 0}
  .pagesheet::before{left:1rem}
  .para{grid-template-columns:minmax(0,1fr);padding-left:2rem}
  .para .mn{text-align:left;padding:1.4rem 0 .1rem;rotate:-1deg}
  .para:first-child .mn{padding-top:0}
  .para .mn:not(:empty) + .tx h2,.para .mn:not(:empty) + .tx h3{margin-top:.2rem}
  .para .mn:empty{display:none}
  .para td:first-child{width:42%}
  .page-h{grid-template-columns:minmax(0,1fr)}
  .page-h .hand{text-align:left;max-width:none}
  .pager{grid-template-columns:minmax(0,1fr)}
  .pager .next{grid-column:1;text-align:left}
  .foot .wrap{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.todo .box .chk{transition:none}.card,.label{transition:none}}
@media print{
  body{background:none}
  .head,.foot,.aside,.pager,.skip{display:none}
  .sheet{box-shadow:none}
  .spread{grid-template-columns:minmax(0,1fr)}
}