@font-face{font-family:Covenant;src:url("fonts/PoWCovenantDemo-Regular.woff2") format("woff2")}
@font-face{font-family:Plex;src:url("fonts/IBMPlexMono-Regular.woff2") format("woff2")}
:root{--ink:#111;--muted:#555;--line:#ddd}
*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:var(--ink);font-family:Covenant,Georgia,serif}
button,a{font:inherit;color:inherit}
a:hover,button:hover{text-decoration:underline}
.bar{position:fixed;top:0;left:0;right:0;z-index:10;height:30px;display:flex;justify-content:space-between;align-items:flex-start;padding:2px 12px;background:#fff;font:9px/1.2 Plex,monospace}
.deck{height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;outline:0}
.slide{min-height:100dvh;height:100dvh;scroll-snap-align:start;display:grid;grid-template-columns:34% minmax(0,1fr);gap:0;padding:54px 20px 40px;background:#fff;overflow:hidden}
.words{position:relative;padding-right:30px;max-height:calc(100dvh - 100px);overflow:auto}
.words h1,.words h2{font:normal clamp(17px,1.55vw,25px)/1.13 Covenant,Georgia,serif;letter-spacing:0;text-transform:uppercase;margin:0 0 22px;max-width:33ch}
.words p{font:normal clamp(16px,1.45vw,23px)/1.2 Covenant,Georgia,serif;max-width:31ch;margin:0 0 13px}
.words p.quiet{color:var(--muted);font-size:clamp(13px,1.1vw,18px);line-height:1.3}
.words p a{font:11px/1.4 Plex,monospace;text-decoration:underline;text-underline-offset:2px}
.visual{position:relative;align-self:start;height:min(63vh,540px);min-width:0;overflow:hidden;border:1px solid var(--line);background:#fff}
.visual canvas{display:block;width:100%!important;height:100%!important;filter:grayscale(1) invert(1)}
.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px}
.photo-grid.three{grid-template-columns:repeat(3,1fr)}
.photo-grid.single{grid-template-columns:1fr}
.photo-grid figure{margin:0;min-width:0;min-height:0;display:flex;flex-direction:column;gap:3px}
.photo-grid img{display:block;width:100%;height:calc(100% - 18px);object-fit:contain}
.photo-grid figcaption,.mini-photo figcaption{font:9px/1.2 Plex,monospace;color:#555}
.mini-photo{margin:20px 0 0;max-width:280px;height:190px;display:flex;flex-direction:column;gap:3px}
.mini-photo img{width:100%;height:calc(100% - 16px);object-fit:cover}
.image-slot{display:grid;place-items:center}.image-slot img{max-width:100%;max-height:100%;object-fit:contain}.placeholder{font:12px/1.4 Plex,monospace;color:#777;text-align:center}
.route-list{display:grid;grid-template-columns:repeat(2,1fr);align-items:center;padding:22px;gap:20px}.route-list div{border-top:1px solid #111;padding-top:12px;font:clamp(17px,2vw,30px)/1.2 Covenant,Georgia,serif}
.project-text-art{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:25px}.project-text-art span{font:clamp(42px,7vw,110px)/.9 Covenant,Georgia,serif}.project-text-art small{font:11px Plex,monospace}
.footer{position:fixed;z-index:10;bottom:0;left:0;right:0;height:24px;display:flex;justify-content:space-between;align-items:center;padding:0 12px;background:#fff;font:9px Plex,monospace}
.footer button{border:0;background:transparent;padding:2px 4px;cursor:pointer}
.footer a{text-decoration:none;margin-right:15px}
.preview .slide[data-sketch] .visual{background:#fff}
.preview .slide[data-sketch] .visual::before{content:attr(data-title);position:absolute;inset:0;display:grid;place-items:center;font:clamp(25px,4vw,60px)/1 Covenant,Georgia,serif;color:#111;text-transform:uppercase;text-align:center;padding:20px}
.preview .slide[data-sketch]:not([data-title]) .visual::before{content:'KABK'}
.slide.photo-slide{grid-template-columns:22% minmax(0,1fr);padding:38px 12px 30px}
.slide.photo-slide .words{padding-right:16px}
.slide.photo-slide .words h2{font-size:clamp(16px,1.35vw,22px);margin-bottom:16px}
.slide.photo-slide .words p{font-size:clamp(15px,1.3vw,21px)}
.slide.photo-slide .visual{height:calc(100dvh - 72px)}
.slide.photo-slide .photo-grid{padding:4px;gap:4px}
.slide.photo-slide .photo-grid img{height:calc(100% - 16px)}
@media(max-width:750px){.slide{display:flex;flex-direction:column;gap:14px;padding:45px 16px 38px}.words{max-height:35vh;overflow:auto}.words h1,.words h2{margin-bottom:12px}.visual{width:100%;height:55vh}.mini-photo{display:none}.photo-grid{gap:3px;padding:3px}.route-list{gap:5px;padding:8px}}
@media(max-width:750px){.slide.photo-slide{display:flex;padding:40px 8px 30px;gap:8px}.slide.photo-slide .words{max-height:25vh;padding:0 8px}.slide.photo-slide .visual{height:70vh;width:100%}}
.outline-slide .words h1,.outline-slide .words h2{font-size:clamp(21px,2.2vw,36px);max-width:22ch}
.outline-topics{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:0 0 0 3vw;font:clamp(18px,2.1vw,32px)/1.1 Covenant,Georgia,serif}
.outline-topics span{width:min(100%,26ch);border-top:1px solid #ddd;padding-top:8px}
.outline-slide:not(:first-child){grid-template-columns:1fr}
.outline-slide:not(:first-child) .words{padding-top:11vh}
.video-slide{grid-template-columns:22% minmax(0,1fr);padding:38px 12px 30px}
.video-slide .visual{height:calc(100dvh - 72px);border:0;background:#111}
.video-frame iframe{display:block;width:100%;height:100%;border:0}
.preview .video-frame{background:#fff;border:1px solid #ddd}
.preview .video-frame::after{content:'KABK-film over Grafisch Ontwerpen';position:absolute;inset:0;display:grid;place-items:center;text-align:center;font:clamp(25px,4vw,60px)/1 Covenant,Georgia,serif;text-transform:uppercase}
.qr-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4vw;padding:5vw}
.qr-grid figure{align-items:center;text-align:center}
.qr-grid img{width:min(100%,35vh);height:auto;aspect-ratio:1;object-fit:contain}
.qr-grid figcaption{font:clamp(13px,1.4vw,21px)/1.2 Plex,monospace;margin-top:15px}
@media(max-width:750px){.outline-topics{padding:0;gap:12px}.outline-slide:not(:first-child) .words{padding-top:4vh}}

.course-overview{white-space:pre-line;text-align:left;padding:clamp(18px,4vw,64px);font:clamp(16px,1.65vw,26px)/1.55 Covenant,Georgia,serif;color:#111}
.course-slide .course-image-slot{border-style:dashed}
.course-slide .placeholder{font:12px/1.5 Plex,monospace;letter-spacing:.04em}
.course-slide .words .quiet{font:11px/1.5 Plex,monospace;color:#555;max-width:none}
.calendar-slide{display:grid;grid-template-columns:1fr;background:#fff}
.calendar-inner{width:min(100%,1100px);margin:auto;padding:5vw}
.calendar-inner h2{font:normal clamp(28px,3.3vw,54px)/1.1 Covenant,Georgia,serif;text-transform:uppercase;margin:0 0 7vh}
.calendar-terms{display:grid;grid-template-columns:1fr 1fr;gap:5vw}
.calendar-terms div{border-top:1px solid #111;padding-top:14px;display:flex;flex-direction:column;gap:14px}
.calendar-terms strong{font:normal clamp(28px,3vw,50px)/1 Covenant,Georgia,serif;text-transform:uppercase}
.calendar-terms span{font:clamp(18px,1.6vw,28px)/1.2 Covenant,Georgia,serif}
.calendar-line{display:grid;grid-template-columns:1fr 1fr;margin-top:10vh;border-top:1px solid #111;padding-top:14px;font:clamp(15px,1.5vw,23px)/1.35 Plex,monospace}
@media(max-width:750px){.calendar-terms{gap:16px}.calendar-inner{padding:24px}.calendar-line{margin-top:7vh}}

.photo-grid video{display:block;width:100%;height:calc(100% - 16px);object-fit:contain}
.photo-grid.stacked{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr)}