/* jurgenlenaert.be, richting C "Draaiboek" (17 oktober 2026). Lettertypes lokaal, geen externe bronnen. */
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --creme:#F4F0E8; --papier:#ECE6DB; --inkt:#121212; --nacht:#0E0E0E; --grijs:#6E685F; --rood:#E0463A; --lijn:rgba(18,18,18,.14);
  --serif:"Instrument Serif", "Didot", Georgia, serif; --mono:"JetBrains Mono", ui-monospace, monospace; --sans:"Inter", system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--nacht)}
body{background:var(--creme);color:var(--inkt);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--rood);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.overslaan{position:fixed;left:16px;top:-60px;z-index:80;background:var(--creme);color:var(--inkt);padding:10px 14px;border-radius:999px;font-size:14px}
.overslaan:focus{top:16px}

/* korrel */
.korrel{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:korrel 1s steps(4) infinite}
@keyframes korrel{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,3%)}}

/* zoeker */
.zoeker{position:fixed;inset:14px;z-index:50;pointer-events:none;font-family:var(--mono);font-size:11px;letter-spacing:.08em;mix-blend-mode:difference;color:#fff}
.hoek{position:absolute;width:26px;height:26px;border:1.5px solid #fff}
.hoek.lb{left:0;top:0;border-right:0;border-bottom:0}.hoek.rb{right:0;top:0;border-left:0;border-bottom:0}
.hoek.lo{left:0;bottom:0;border-right:0;border-top:0}.hoek.ro{right:0;bottom:0;border-left:0;border-top:0}
.tc{position:absolute;right:40px;top:6px;font-variant-numeric:tabular-nums}
.rec{position:absolute;left:40px;top:6px;display:flex;align-items:center;gap:8px}
.rec i{width:8px;height:8px;border-radius:50%;background:#ff4d40;animation:pinken 1.2s steps(2) infinite}
@keyframes pinken{50%{opacity:0}}
.scene{position:absolute;left:40px;bottom:6px}
.fps{position:absolute;right:40px;bottom:6px}

/* glazen menu */
.menu{position:fixed;top:44px;left:50%;transform:translateX(-50%);z-index:55;display:flex;gap:4px;padding:6px;border-radius:999px;
  background:rgba(24,24,24,.55);color:#F4F0E8;backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 30px rgba(0,0,0,.15)}
.menu a{font-size:13px;text-decoration:none;padding:8px 14px;border-radius:999px;white-space:nowrap;transition:background .25s,color .25s}
.menu a:hover,.menu a.actief{background:var(--creme);color:var(--inkt)}

/* opening */
.opening{height:200vh;position:relative;background:var(--nacht);color:var(--creme)}
.opening .vast{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden}
.opening .lat{position:absolute;inset:0;z-index:4;background:var(--creme);transform-origin:top;transform:scaleY(var(--dicht,0))}
.titel{position:relative;text-align:center;z-index:2;padding:0 16px}
.titel .klap{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;opacity:.7}
.titel h1{font-family:var(--serif);font-weight:400;font-size:clamp(64px,13vw,220px);line-height:.85;letter-spacing:-.02em;margin:18px 0}
.titel h1 em{font-style:italic}
.titel p{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2vw,26px);opacity:.78}
.opening .portret{position:absolute;bottom:0;left:50%;height:86vh;width:auto;max-width:none;transform:translate(-50%, calc(var(--op,0) * 12vh));filter:grayscale(1) contrast(1.1) brightness(.85);opacity:calc(.55 - var(--op,0)*.4);z-index:1}
.scrolltip{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.2em;opacity:.6;z-index:3;white-space:nowrap}

/* scènes */
.sc{position:relative;padding:18vh 6vw 14vh;overflow:hidden}
.sc.donker{background:var(--nacht);color:var(--creme)}
.sc.papier{background:var(--papier)}
.klapbord{display:flex;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:1px solid currentColor;width:max-content;max-width:100%;margin-bottom:34px}
.klapbord span{padding:8px 14px;border-right:1px solid currentColor}
.klapbord span:last-child{border-right:0}
.klapbord::before{content:"";width:34px;flex:none;background:repeating-linear-gradient(135deg,currentColor 0 6px,transparent 6px 12px);border-right:1px solid currentColor}
.schuif{font-family:var(--serif);font-weight:400;font-size:clamp(76px,16vw,290px);line-height:.88;letter-spacing:-.03em;white-space:nowrap;transform:translateX(var(--x,0));will-change:transform}
.schuif em{font-style:italic}
.raster{display:grid;grid-template-columns:5fr 7fr;gap:5vw;margin-top:8vh;align-items:start}
.raster.om{grid-template-columns:7fr 5fr}
.raster.drie{grid-template-columns:repeat(3,1fr);gap:3vw}
.lees{font-size:17px;line-height:1.7;max-width:540px}
.lees p+p{margin-top:14px}
.donker .lees{color:rgba(244,240,232,.82)}
.citaat{font-family:var(--serif);font-style:italic;font-size:clamp(28px,3vw,42px);line-height:1.15;margin-top:26px}
.lees .citaat{color:inherit}
.donker .lees .citaat{color:var(--creme)}
.jaar{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--rood);display:block;margin:26px 0 4px}
.lees .jaar:first-child{margin-top:0}
.stapel{display:grid;gap:56px}

/* filmstill die openvouwt */
.still{--o:1;position:relative;clip-path:inset(calc(50% - var(--o,0) * 50%) 0 calc(50% - var(--o,0) * 50%) 0);will-change:clip-path;margin-bottom:26px}
.still img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transform:scale(calc(1.18 - var(--o,0) * .18))}
.still.kleur img{filter:grayscale(calc(1 - var(--o,0))) contrast(1.04)}
.still.echt img{filter:none}
.still figcaption{position:absolute;left:0;bottom:-24px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--grijs)}
.donker .still figcaption{color:rgba(244,240,232,.55)}
.still.breed{aspect-ratio:2.39/1}
.still.hoog{aspect-ratio:4/5}
.still.vier{aspect-ratio:4/3}
.still.app{aspect-ratio:16/10}

/* lege plek voor een beeld dat nog komt */
.leeg{aspect-ratio:21/9;max-width:760px;min-height:220px;border:1.5px dashed currentColor;opacity:.75;background:repeating-linear-gradient(135deg,rgba(128,128,128,.08) 0 10px,transparent 10px 20px);display:grid;place-items:center;text-align:center;padding:24px;position:relative;margin-top:9vh}
.leeg::after{content:"BEELD VOLGT";position:absolute;left:12px;top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em}
.leeg span{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,32px);line-height:1.2;max-width:560px}

/* filmstrook */
.strook{margin:12vh -6vw 0;background:#151515;padding:26px 0;position:relative}
.strook::before,.strook::after{content:"";position:absolute;left:0;right:0;height:12px;background:repeating-linear-gradient(90deg,transparent 0 14px,var(--creme) 14px 26px,transparent 26px 40px);opacity:.85}
.strook::before{top:7px}.strook::after{bottom:7px}
.strook .rol{display:flex;gap:14px;width:max-content;transform:translateX(var(--x,0));padding:0 14px}
.strook img{height:min(34vh,300px);width:auto;aspect-ratio:2/3;object-fit:cover;filter:grayscale(1) contrast(1.05);border-radius:2px}
.strook img.app{filter:none;aspect-ratio:16/10}
.strook img.tel{filter:none;aspect-ratio:739/1600}

.namen{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.namen span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--lijn);border-radius:999px;padding:6px 11px}
.donker .namen span{border-color:rgba(244,240,232,.25)}
.label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin-top:28px}

.getal{margin-top:30px;border-top:1px solid currentColor;padding-top:18px}
.getal b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(56px,7vw,104px);line-height:.9}
.getal small{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}

.knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.knop{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;text-decoration:none;font-size:14px;
  background:rgba(18,18,18,.06);border:1px solid rgba(18,18,18,.22);transition:background .2s}
.knop:hover{background:rgba(18,18,18,.12)}
.donker .knop{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.donker .knop:hover{background:rgba(255,255,255,.22)}
.tekstlink{text-underline-offset:3px}

.generaties figure{margin-bottom:34px}
.generaties .naam{font-family:var(--serif);font-size:30px;margin-top:34px}
.generaties .naam small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-top:4px}
.sober{font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.6vw,36px);line-height:1.25;max-width:820px;margin-top:10vh}

/* aftiteling */
.aftiteling{background:var(--nacht);color:var(--creme);height:240vh;position:relative}
.aftiteling .vast{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center;text-align:center;padding:0 16px}
.aftiteling .rol{transform:translateY(var(--y,40vh))}
.aftiteling dl{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px;margin:0 auto 44px;max-width:680px;text-align:left}
.aftiteling dt{text-align:right;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;padding-top:7px}
.aftiteling dd{font-family:var(--serif);font-size:24px}
.aftiteling dd a{text-decoration:none;border-bottom:1px solid rgba(244,240,232,.3)}
.aftiteling dd a:hover{border-color:var(--creme)}
.aftiteling h2{font-family:var(--serif);font-weight:400;font-size:clamp(48px,7vw,104px);line-height:.95}
.aftiteling h2 em{font-style:italic}
.aftiteling .mail{display:inline-block;margin-top:22px;font-family:var(--serif);font-style:italic;font-size:clamp(26px,3.4vw,46px);text-decoration:none;border-bottom:1px solid currentColor}
.aftiteling .voet{margin-top:36px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;opacity:.55;line-height:1.8}

@media (max-width:820px){
  .zoeker{inset:8px}
  .tc{right:30px}.rec{left:30px}.scene,.fps{display:none}
  .menu{top:auto;bottom:22px;max-width:calc(100vw - 32px);overflow-x:auto;scrollbar-width:none}
  .menu::-webkit-scrollbar{display:none}
  .menu a{padding:8px 12px;font-size:12px}
  .sc{padding:14vh 16px 12vh}
  .raster,.raster.om,.raster.drie{grid-template-columns:1fr;gap:40px}
  .raster.om>:first-child{order:2}
  .strook{margin:8vh -16px 0}
  .opening .portret{height:66vh}
  .opening .vast{place-items:start center;padding-top:15vh}
  .scrolltip{display:none}
  .aftiteling dl{grid-template-columns:1fr;text-align:center;gap:0}
  .aftiteling dt{text-align:center;padding-top:12px}
  .aftiteling dd{font-size:21px}
  .klapbord{font-size:9px}
  .klapbord span{padding:7px 9px}
  .klapbord span:last-child{display:none}
  .klapbord span:nth-last-child(2){border-right:0}
  .lees{font-size:16px}
  .leeg{aspect-ratio:auto;width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .schuif,.strook .rol{transform:none!important}
  .schuif{white-space:normal}
  .strook{overflow-x:auto;scrollbar-width:thin}
  .still{clip-path:none!important}
  .still img{transform:none!important}
  .still.kleur img{filter:none}
  .opening{height:100vh;height:100svh}
  .opening .lat{display:none}
  .aftiteling{height:auto}.aftiteling .vast{position:static;height:auto;padding:16vh 16px}
  .aftiteling .rol{transform:none!important}
}