@font-face{font-family: 'Work Sans';src: url('fonts/WorkSans.woff') format('woff');font-weight: 100 900;font-display: swap}:root{--schaduw: #172612;--lumineus: #3d5703;--mos: #5c8505;--mist: #b0d900;--neon: #cfff00;--violet: #c2a3ff;--papier: #f3eee3;--inkt: #2a2a30;--letter: 'Work Sans','Avenir Next','Helvetica Neue',system-ui,sans-serif}html,body{margin: 0;height: 100%;overflow: hidden;background: var(--papier);font-family: var(--letter);color: var(--schaduw);cursor: default}#doek{position: fixed;inset: 0;width: 100vw;height: 100vh;display: block}#papier,.korrel{position: fixed;inset: 0;pointer-events: none;mix-blend-mode: multiply;background: radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(90,70,40,.18) 100%),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");opacity: .55}#onderschrift{position: fixed;left: 5vw;bottom: 11vh;max-width: 46vw;pointer-events: none;transition: opacity .6s ease,transform .6s ease}#onderschrift.weg{opacity: 0;transform: translateY(1.2vh)}#jaar{font-size: 7.2vw;font-weight: 700;line-height: .9;letter-spacing: -.02em;color: var(--schaduw);font-variant-numeric: tabular-nums}#titel{font-size: 2.3vw;font-weight: 600;margin: 1.2vh 0 .6vh;line-height: 1.15}#tekst{font-size: 1.35vw;font-weight: 400;margin: 0;line-height: 1.45;max-width: 40vw;color: #2d3a26}#onderschrift.licht #jaar,#onderschrift.licht #titel{color: #f6f3ea}#onderschrift.licht #tekst{color: #d9dccd}#jaar,#titel,#tekst{text-shadow: 0 0 1.2vw var(--papier),0 0 .4vw var(--papier)}#tekst,#titel{text-shadow: 0 0 .9vw var(--papier),0 0 .35vw var(--papier),0 0 .15vw var(--papier),0 0 .08vw var(--papier)}#onderschrift.licht #jaar,#onderschrift.licht #titel,#onderschrift.licht #tekst{text-shadow: 0 0 1.2vw rgba(10,14,30,.9)}#tijdlijn{position: fixed;left: 5vw;right: 5vw;bottom: 5vh;height: 2px;background: rgba(23,38,18,.18);pointer-events: none}#tijdlijnVol{position: absolute;left: 0;top: 0;bottom: 0;width: 0;background: var(--schaduw)}#tijdlijnVol::after{content: '';position: absolute;right: -6px;top: -5px;width: 12px;height: 12px;border-radius: 50%;background: var(--neon);box-shadow: 0 0 0 2px var(--schaduw)}#tijdlijnJaren span{position: absolute;top: 10px;transform: translateX(-50%);font-size: .8vw;color: rgba(23,38,18,.55);font-variant-numeric: tabular-nums}body.nacht #tijdlijn{background: rgba(255,255,255,.2)}body.nacht #tijdlijnVol{background: #f6f3ea}body.nacht #tijdlijnJaren span{color: rgba(246,243,234,.6)}#hulp{position: fixed;right: 2vw;bottom: 12vh;background: rgba(255,255,255,.92);padding: 14px 18px;border-radius: 10px;font-size: 14px;line-height: 1.6;box-shadow: 0 4px 24px rgba(0,0,0,.15)}#zwart{position: fixed;inset: 0;background: #000;z-index: 10}html.web{--rand: #fff;--vloei: linear-gradient(transparent,#000 10%,#000 78%,transparent)}html.web,html.web body{background: transparent}body.web{touch-action: manipulation}.web #doek,.web #papier{-webkit-mask-image: var(--vloei);mask-image: var(--vloei)}body.web #doek{touch-action: pan-y;cursor: pointer}.web #onderschrift{left: 5vw;bottom: calc(clamp(56px,11vh,96px) + 1vh);max-width: min(52vw,760px)}.web #onderschrift::before{content: '';position: absolute;z-index: -1;inset: -8vh -10vw -14vh -8vw;background: radial-gradient(closest-side,color-mix(in srgb,var(--rand) 85%,transparent),color-mix(in srgb,var(--rand) 60%,transparent) 55%,transparent)}.web #jaar,.web #titel,.web #tekst{text-shadow: 0 0 .9vw var(--rand),0 0 .35vw var(--rand),0 0 .15vw var(--rand)}.web #jaar{font-size: clamp(40px,7.2vw,128px)}.web #titel{font-size: clamp(18px,2.3vw,40px)}.web #tekst{font-size: clamp(14px,1.35vw,22px);max-width: min(44vw,640px)}#balk{position: fixed;left: 0;right: 0;bottom: 0;height: clamp(56px,11vh,96px);display: flex;align-items: center;gap: clamp(16px,3vw,48px);padding: 0 5vw;box-sizing: border-box}.web #tijdlijn{position: relative;left: auto;right: auto;bottom: auto;flex: 1;pointer-events: auto;margin-bottom: 14px}.web #tijdlijnJaren span{top: 8px;padding: 6px 4px;font-size: clamp(11px,.85vw,15px);cursor: pointer;border-radius: 4px;transition: color .2s;user-select: none;-webkit-user-select: none}.web #tijdlijnJaren span::before{content: '';position: absolute;left: 50%;top: -11px;width: 1px;height: 6px;background: rgba(23,38,18,.35)}.web #tijdlijnJaren span:hover,.web #tijdlijnJaren span:focus-visible{color: var(--schaduw);outline: none}.web #tijdlijnJaren span:focus-visible{box-shadow: 0 0 0 2px var(--mos)}#knoppen{display: flex;gap: 8px;flex: none}#knoppen button{width: 40px;height: 40px;border-radius: 50%;border: 0;padding: 0;display: grid;place-items: center;background: rgba(255,255,255,.75);color: var(--schaduw);cursor: pointer;box-shadow: 0 1px 2px rgba(23,38,18,.12),inset 0 0 0 1px rgba(23,38,18,.12);transition: background .2s,opacity .2s}#knoppen button:hover{background: #fff}#knoppen button:focus-visible{outline: 2px solid var(--mos);outline-offset: 2px}#knoppen button:disabled{opacity: .35;cursor: default}#knoppen button[hidden]{display: none}#knoppen svg{width: 16px;height: 16px;fill: none;stroke: currentColor;stroke-width: 1.8;stroke-linecap: round;stroke-linejoin: round}#knoppen [data-doe="speel"]{background: var(--neon)}#knoppen [data-doe="speel"] path{display: none}#knoppen [data-doe="speel"] .speel{fill: currentColor}#knoppen [data-staat="pauze"] .pauze,#knoppen [data-staat="speel"] .speel,#knoppen [data-staat="opnieuw"] .opnieuw{display: inline}#bron{position: fixed;left: 0;right: 0;bottom: 1px;margin: 0;font-size: 7.5px;line-height: 1.2;letter-spacing: .01em;color: rgba(23,38,18,.24);pointer-events: none;text-align: center}#laden{position: fixed;inset: 0;z-index: 20;display: grid;place-items: center;background: var(--rand);transition: opacity .7s ease}#laden.weg{opacity: 0;pointer-events: none}#laden div{display: grid;gap: 6px;justify-items: center;text-align: center;padding: 0 16px}#laden b{font-size: clamp(22px,3vw,44px);font-weight: 600}#laden span{font-size: clamp(13px,1.1vw,18px);color: #2d3a26}#laden i{display: block;width: min(220px,60vw);height: 3px;margin-top: 14px;background: rgba(23,38,18,.15);border-radius: 2px;overflow: hidden}#laden em{display: block;height: 100%;width: 0;background: var(--schaduw);transition: width .3s ease}@media (max-aspect-ratio: 5/4),(max-width: 560px){html.web{--vloei: linear-gradient(transparent,#000 9%,#000 84%,transparent)}body.web{--beeld: 60vh}.web #doek{height: var(--beeld)}.web #papier{height: var(--beeld)}.web #onderschrift{top: calc(var(--beeld) - 2vh);bottom: auto;left: 0;right: 0;max-width: none;padding: 0 max(16px,5vw)}.web #jaar{font-size: clamp(30px,10vw,64px)}.web #titel{font-size: clamp(16px,4.8vw,28px);margin: 4px 0 2px}.web #tekst{font-size: clamp(13px,3.7vw,19px);max-width: none;line-height: 1.4}.web #jaar,.web #titel,.web #tekst{text-shadow: none}.web #onderschrift::before{display: none}#bron{padding: 0 16px;font-size: 7px}#balk{height: 64px;padding: 0 max(16px,5vw);gap: 20px}#knoppen{gap: 6px}#knoppen button{width: 38px;height: 38px}#knoppen [data-doe="scherm"]{display: none}}@media (max-width: 760px){.web #tijdlijnJaren span:nth-child(3),.web #tijdlijnJaren span:nth-child(7),.web #tijdlijnJaren span:nth-child(9){font-size: 0;width: 14px;height: 22px;padding: 0}}@media (max-width: 420px){.web #tijdlijnJaren span:nth-child(2),.web #tijdlijnJaren span:nth-child(5),.web #tijdlijnJaren span:nth-child(8){font-size: 0;width: 14px;height: 22px;padding: 0}}