/* AANPASSEN: de belangrijkste layoutinstellingen staan hieronder. */
:root {
  --background: #fff;
  --text: #262626;
  --accent: #cc2600;
  --font: "tt-commons-pro", "TT Commons Pro", "TT Commons", Arial, sans-serif;
  --regular: 400;
  --medium: 500;
  --demibold: 600;
  --text-size: clamp(14px, 2.16vh, 22px);
  --line-height: 1.2;
  --edge: 1.44vh;
  --nav-width: 14%;
  --panel-width: 77%;
  --panel-padding: 4.32vh;
  --intro-meta-width: 25%;
  --gallery-gap: 2.62vw;
  --home-height: 57.93vw;
  --hover-scale: 1.06;
}
* { box-sizing: border-box; }
html { background: var(--background); color: var(--text); }
body { margin: 0; font: var(--regular) var(--text-size)/var(--line-height) var(--font); }
a { color: inherit; text-decoration: none; }
a:active, button:active { opacity: .7; }
button { font: inherit; color: inherit; border: 0; padding: 0; background: none; cursor: pointer; }
a:focus-visible,button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: -100px; left: 10px; z-index: 1000; background: white; padding: 8px; }
.skip-link:focus { top: 10px; }
.navigation { position: fixed; z-index: 30; top: 0; left: 0; width: var(--nav-width); padding: var(--edge); }
.mobile-navigation { display: none; }
.name { display: block; font-weight: var(--medium); }
.ticker { width: 100%; overflow: hidden; white-space: nowrap; }
.ticker-track { display: flex; width: max-content; animation: ticker 22s linear infinite; }
.ticker-track span { padding-right: .3em; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.project-links { margin-top: 2.8em; font-weight: var(--regular); }
.project-links a { display: block; }
.project-links a[aria-current=page] { color: var(--accent); }
.about-link { display: inline-block; margin-top: 1.2em; font-weight: var(--regular); }
.year { position: fixed; z-index: 31; bottom: var(--edge); left: var(--edge); font-size: max(9px,.594vw); font-weight: 400; }
.home { position: relative; min-height: 100svh; height: var(--home-height); overflow: clip; }
.home-item { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1vw); width: calc(var(--width) * 1%); z-index: var(--z,1); transform: translate(var(--drag-x,0px),var(--drag-y,0px)) rotate(calc(var(--rotation,0) * 1deg)); }
.home-item img { display: block; width: 100%; height: auto; transition: scale .25s ease; }
.home-item:hover img { scale: var(--hover-scale); }
.home-item[data-draggable=true] { touch-action: none; cursor: grab; }
.home-item.dragging { cursor: grabbing; }
.project { position: fixed; z-index: 20; top: 0; right: 0; width: var(--panel-width); height: 100dvh; overflow: auto; background: var(--background); padding: var(--panel-padding); box-shadow: 0 0 2.2vw -.2vw #0004; overscroll-behavior: contain; }
.project:focus,.about:focus,#main:focus { outline: none; }
.project-intro { display: grid; grid-template-columns: var(--intro-meta-width) 1fr; }
.project-meta { padding-right: 1em; }
.project-meta h1,.project-description h2 { font-size: inherit; font-weight: var(--medium); margin: 0 0 1.2em; }
.meta-label { font-weight: var(--medium); }
.project-meta p,.project-description p { margin: 0 0 1.2em; }
.project-description p { font-weight: 400; }
.exhibitions { display: block; font-size: .667em; font-weight: 400; line-height: 1.35; letter-spacing: .017em; }
.gallery { margin-top: var(--intro-gap,3em); }
.gallery-row { display: grid; grid-template-columns: repeat(var(--columns,1),minmax(0,1fr)); gap: var(--gap,var(--gallery-gap)); align-items: var(--align,start); margin-bottom: var(--after,1.2em); }
.gallery figure { margin: 0; width: var(--image-width,100%); justify-self: var(--image-align,center); }
.gallery img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.image-button { display: block; width: 100%; }
.project-video { width: 100%; aspect-ratio: 16/9; border: 0; }
.project-description p.emphasis { font-weight: var(--medium); }
.gallery figcaption { font-size: .54em; font-weight: 400; margin-top: .75em; }
.return-link { display: inline-block; margin: 2em 0 1em; }
.about { position: fixed; z-index: 50; inset: 0; overflow: auto; background: #fffffff2; padding: var(--edge); }
.about-inner { width: 86%; }
.about-heading { display: flex; justify-content: space-between; margin-bottom: 1.2em; font-weight: var(--medium); }
.about-grid { display: grid; grid-template-columns: 25% 25% 50%; gap: 1vw; }
.about p { margin: 0 0 1.2em; }
dialog { border: none; padding: 3vw; background: white; color: var(--text); max-width: none; max-height: none; width: 100vw; height: 100dvh; }
dialog::backdrop { background: white; }
dialog[open] { display: grid; grid-template-columns: 35px 1fr 35px; align-items: center; }
dialog figure { margin: 0; text-align: center; }
dialog img { max-width: 100%; max-height: 86dvh; object-fit: contain; }
dialog figcaption { font-size: 14px; }
.lightbox-close { position: absolute; right: 20px; top: 15px; }
.previous,.next { font-size: 32px; }
.mobile-menu { margin: 0; inset: 0; padding: var(--mobile-edge,5px); width: 100%; height: 100dvh; overflow-y: auto; }
.mobile-menu[open] { display: block; }
.mobile-menu .mobile-navigation { display: flex; }
.mobile-navigation { justify-content: space-between; align-items: flex-start; gap: 16px; }
.mobile-navigation span,.mobile-name { display: block; }
.mobile-name { font-weight: var(--medium); }
.mobile-navigation button { flex: none; line-height: var(--line-height); }
.mobile-menu-projects,.mobile-menu-contact { margin-top: 1.2em; }
.mobile-menu-projects a,.mobile-menu-contact a { display: block; width: fit-content; }
.mobile-menu-projects a[aria-current=page] { color: var(--accent); }
@media(max-width:700px) {
  :root { --edge: 12px; --mobile-edge: 5px; --mobile-header-height: calc(2.4em + 2 * var(--mobile-edge)); --nav-width: 100%; --text-size: 16px; --panel-width: 100%; --panel-padding: 18px; --gallery-gap: 16px; }
  .navigation { position: fixed; width: 100%; padding: var(--mobile-edge); background: var(--background); }
  .desktop-navigation { display: none; }
  .mobile-navigation { display: flex; }
  #main { padding-top: var(--mobile-header-height); }
  .home { height: 110vw; min-height: 420px; }
  .home-item { left: calc(var(--mobile-x,var(--x)) * 1%); top: calc(var(--mobile-y,var(--y)) * 1vw); width: calc(var(--mobile-width,var(--width)) * 1%); }
  .year { position: relative; bottom: auto; left: auto; padding: 12px; font-size: 10px; }
  .project { position: relative; min-height: 70vh; height: auto; box-shadow: none; }
  body.project-open .home { display: none; }
  body.project-open .year { position: fixed; left: 12px; bottom: 8px; padding: 0; }
  .project-intro { grid-template-columns: 1fr; gap: 18px; }
  .exhibitions { font-size: 12px; }
  .gallery { margin-top: 28px !important; }
  .gallery-row:not([data-mobile=keep]) { grid-template-columns: 1fr; }
  .gallery figcaption { font-size: 12px; }
  .about-inner { width: 100%; }
  .about-grid { grid-template-columns: 1fr; gap: 24px; max-width: 440px; }
  dialog { padding: 45px 8px; }
  dialog[open] { grid-template-columns: 25px 1fr 25px; }
}
@media(prefers-reduced-motion:reduce) { .ticker-track { animation: none; } .home-item img { transition: none; } }