:root{color-scheme:light}*{box-sizing:border-box}body{margin:0;background:#fff;color:#161616;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}header{position:absolute;right:8vw;top:36px;font-size:16px;font-weight:500;letter-spacing:-.025em;z-index:1}main{display:grid;grid-template-columns:minmax(0,1fr) 200px;column-gap:50px;margin-right:8vw;min-height:100svh}#gallery{min-width:0;align-self:start;position:sticky;top:0}#index{padding-top:110px;justify-self:end;align-self:start;padding-bottom:32px}.entry{margin:0}.number{display:block;border:0;background:none;color:#767676;font:400 14px/1.15 'Helvetica Neue',Helvetica,Arial,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.015em;padding:0;text-align:right;min-width:40px;min-height:18px;cursor:pointer}.number:hover,.number[aria-expanded=true]{color:#111}.number[aria-expanded=true]{font-weight:500}.number:focus,.number:focus-visible{outline:none;box-shadow:none}.display{margin:0;width:100%;display:flex;flex-direction:column;align-items:flex-start}.display[hidden]{display:none}.display img,.display video{order:0;display:block;max-width:100%;width:auto;height:auto;max-height:82svh;object-fit:contain;object-position:top left;margin:0}.display video{width:100%;cursor:pointer;outline:none}.display figcaption{order:1;margin:18px 0 24px 20px;font-size:13px;line-height:1.5;color:#555}.display figcaption span{display:block}.label-title{font-style:normal}.error{order:2;margin:12px 20px;font-size:14px}@media(max-width:760px){header{top:24px;right:20px;font-size:14px}main{grid-template-columns:minmax(0,1fr) 54px;column-gap:18px;margin-right:20px}#index{padding-top:85px}.number{min-height:20px}.display img,.display video{max-height:70svh}.display figcaption{font-size:12px;margin-left:12px}}

/* White breathing room around the artwork. */
#gallery{padding:32px 0 0 32px;top:0}
.display img,.display video{max-height:calc(82svh - 32px)}
.display figcaption{margin-left:0}
@media(max-width:760px){#gallery{padding:20px 0 0 20px}.display img,.display video{max-height:calc(70svh - 20px)}.display figcaption{margin-left:0}}
/* Subtle gray page with a white artwork surround. */
body{background:#f7f7f7}
.display img,.display video{border:0}


.legal-links{padding:12px 8vw 24px 20px;text-align:right;font-size:12px}.legal-links a{color:#555;text-underline-offset:3px}
@media(max-width:760px){.legal-links{padding-right:20px}}

.wireframe{display:block;width:100%;height:calc(82svh - 32px);min-height:280px;cursor:grab;touch-action:none;outline:none}.wireframe.dragging{cursor:grabbing}@media(max-width:760px){.wireframe{height:calc(70svh - 20px)}}

/* Keep the artist name legible over light and dark artwork, including video. */
#artist{color:#fff;mix-blend-mode:difference}

.display img.additional-image{order:2;width:80%;height:auto;max-height:none;margin:clamp(100px,22svh,260px) 0 32px}

/* Legal links remain accessible in the lower-right corner. */
.legal-links{position:fixed;right:8vw;bottom:20px;z-index:10;padding:6px 0 6px 10px;background:#f7f7f7}
.legal-links a{text-decoration:none}
@media(max-width:760px){.legal-links{right:20px;bottom:14px;padding:6px 0 6px 10px}}

/* Object shortcuts stay beside their number without moving the list. */
#index{position:sticky;top:0;z-index:2}
.entry{position:relative}
.object-shortcuts{position:absolute;right:100%;top:0;display:flex;gap:10px;padding-right:10px;height:100%;align-items:center;visibility:hidden;opacity:0}
.entry.keyboard-preview .object-shortcuts{visibility:visible;opacity:1}
.object-shortcuts a{font-size:12px;line-height:1;text-decoration:none;font-weight:500}
.object-shortcuts a:hover{text-decoration:underline;text-underline-offset:3px}
.object-marker{order:0;display:block;font-size:12px;font-weight:500;margin:0 0 10px;scroll-margin-top:32px}
.object-marker.additional-marker{order:2;margin:clamp(100px,22svh,260px) 0 10px}
.display img.additional-image{margin-top:0}


/* Compact object letters immediately before the number. */
.object-shortcuts{right:2ch;gap:0;padding-right:0;font:400 14px/1.15 Helvetica,Arial,sans-serif}
.object-shortcuts a{font:inherit;letter-spacing:0}

/* Invisible object anchors preserve shortcut navigation and artwork spacing. */
.object-marker{height:0;min-height:0;margin:0;font-size:0;line-height:0;overflow:hidden}
.object-marker.additional-marker{margin:clamp(100px,22svh,260px) 0 0}

/* Tighter vertical number list. */
.number{line-height:1;min-height:15px}

.work-description{font-size:13px;line-height:1.15;font-style:normal;font-weight:400;max-width:52ch;margin:48px 0 0;color:#555;text-wrap:pretty}
.additional-description{order:2;margin:48px 0 32px;max-width:min(52ch,80%)}
.display img.additional-image{margin-bottom:0}
@media(max-width:760px){.work-description{font-size:12px}}

.display video.additional-image{order:2;width:80%;height:auto;max-height:none;margin:0}

.work-technical{font-size:11px;line-height:1.3;max-width:62ch;margin:12px 0 0;color:#777}
.additional-description{margin-bottom:0}
.additional-technical{order:2;max-width:min(62ch,80%);margin-bottom:32px}

/* Fixed navigation with a separately scrollable exhibition. */
body.portfolio-page{height:100dvh;overflow:hidden}
.portfolio-page main{height:100dvh;min-height:0}
.portfolio-page #artist{position:fixed}
.portfolio-page #index{position:fixed;right:8vw;top:110px;padding:0}
.portfolio-page #gallery{position:relative;top:auto;height:100dvh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:clamp(100px,18svh,190px)}
.portfolio-page #gallery::-webkit-scrollbar{display:none}
@media(max-width:760px){.portfolio-page #index{right:20px;top:85px}}

/* Compact captions, with breathing room between the first two objects. */
.work-description{margin-top:28px}
.work-technical{margin-top:8px;line-height:1.2}
.object-marker[id$="-1"]{margin-top:clamp(140px,28svh,320px)}
.page-progress{position:fixed;left:0;bottom:0;width:8px;height:100dvh;z-index:30;pointer-events:none;transform:scaleY(0);transform-origin:bottom;transition:transform 120ms linear}
@media(max-width:760px){
 .portfolio-page main{grid-template-columns:minmax(0,1fr) 32px;column-gap:12px;margin-right:12px}
 .portfolio-page #gallery{padding-left:16px}
 .display video.additional-image{width:100%}
 .work-description{margin-top:24px}
 .additional-description{max-width:100%}
}
@media(prefers-reduced-motion:reduce){.page-progress{transition:none}}

/* Full-page transparent 3D surface; the slot preserves the original framing. */
.wireframe-slot{width:100%;height:calc(82svh - 32px);min-height:280px;flex-shrink:0}
.wireframe-slot .wireframe{position:fixed;inset:0;width:100vw;height:100dvh;min-height:0;border:0;background:transparent;z-index:0}
.display:has(.wireframe-slot) figcaption{position:relative;z-index:1}
@media(max-width:760px){.wireframe-slot{height:calc(70svh - 20px)}}

.wireframe-slot .wireframe{pointer-events:none;cursor:default;touch-action:auto}

/* Preview floats immediately beside the compact object letters. */
.number-preview{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);width:88px;height:62px;object-fit:contain;object-position:right center;pointer-events:none;background:#f7f7f7}
.number-preview:not([src]){display:none}
@media(max-width:760px){.number-preview{width:64px;height:46px}}

.number-previews{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;width:max-content}
.number-previews a{display:block;line-height:0}
.number-previews .number-preview{position:static;transform:none;display:block;object-position:center;pointer-events:auto}
@media(max-width:760px){.number-previews .number-preview{width:52px;height:42px}.number-previews{gap:4px}}

.work-description{max-width:66ch}
.work-technical{max-width:78ch}
.additional-description{max-width:min(66ch,100%)}
.additional-technical{max-width:min(78ch,100%)}

/* Fit previews to their natural proportions without a padded background. */
.number-previews .number-preview{width:auto;height:auto;max-width:88px;max-height:62px;background:transparent;border:0;padding:0;box-shadow:none}
@media(max-width:760px){.number-previews .number-preview{width:auto;height:auto;max-width:52px;max-height:42px}}

.number-previews{gap:0}

/* Bridge the visual gap so pointer travel keeps the preview open. */
.number-previews{right:100%;padding-right:8px}

.entry.preview-open .object-shortcuts{visibility:visible;opacity:1}

/* Align thumbnail tops with the letters of their navigation row. */
.number-previews{top:0;transform:none;align-items:flex-start}

/* Keep larger series entirely within the viewport. */
.number-previews{max-width:calc(92vw - 60px - var(--object-count)*10px)}
.number-previews a{min-width:0;flex:0 1 auto}
.number-previews .number-preview{max-width:100%;width:auto;height:auto;max-height:62px}
@media(max-width:760px){.number-previews{max-width:calc(100vw - 65px - var(--object-count)*10px)}.number-previews .number-preview{max-height:42px}.portfolio-page #index{max-height:calc(100dvh - 145px)}}

.number-previews a{max-width:88px}
@media(max-width:760px){.number-previews a{max-width:52px}}

#artist{cursor:pointer}
#artwork-overview{position:fixed;z-index:20;top:64px;right:8vw;width:84vw;max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain;background:#f7f7f7;padding:16px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:14px;box-sizing:border-box}
#artwork-overview[hidden]{display:none}
.overview-series{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0;max-width:100%}
.overview-series a{display:block;line-height:0;flex-shrink:0}
.overview-series img{display:block;height:66px;width:auto;max-width:120px;object-fit:contain;object-position:top;background:transparent}
.overview-series a:focus-visible{outline:2px solid #777;outline-offset:2px}
@media(max-width:760px){#artwork-overview{top:48px;right:16px;width:calc(100vw - 32px);padding:10px;gap:10px;max-height:calc(100dvh - 90px)}.overview-series img{height:48px;max-width:85px}}

/* A continuous contact sheet sized to fit the screen without scrolling. */
#artwork-overview{padding:0;gap:0;overflow:hidden;max-height:calc(100dvh - 92px);background:#f7f7f7;align-items:flex-start}
.overview-series{display:contents}
.overview-series a{margin:0;padding:0;overflow:hidden}
.overview-series img{width:100%;height:100%;max-width:none;object-fit:fill}
@media(max-width:760px){#artwork-overview{padding:0;gap:0;max-height:calc(100dvh - 76px)}.overview-series img{height:100%;max-width:none}}

/* Shorter pauses between objects, with a title for each one. */
.object-marker.additional-marker,.object-marker[id$="-1"]{margin-top:clamp(72px,14svh,150px)}
.additional-technical{margin-bottom:12px}
.additional-title{order:2;font-size:13px;line-height:1.3;color:#555;margin:18px 0 0;max-width:66ch}
.additional-title+.additional-description{margin-top:18px}
@media(max-width:760px){.additional-title{font-size:12px}}

.additional-caption{order:2;margin:18px 0 24px;font-size:13px;line-height:1.5;color:#555;width:100%}
.additional-caption>span{display:block}
@media(max-width:760px){.additional-caption{font-size:12px}}

/* Enlarged video on a black page, retaining the site navigation. */
body.cinema-mode{background:#000;color:#fff}
.cinema-layer{position:fixed;inset:0;z-index:25;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 6vw 60px;gap:14px;overscroll-behavior:none}
.cinema-layer .cinema-video{display:block;width:100%;height:auto;max-width:1600px;max-height:calc(100dvh - 170px);object-fit:contain;cursor:pointer;outline:none}
.cinema-caption{color:#fff;font-size:13px;line-height:1.3}
.cinema-mode #artist,.cinema-mode #index,.cinema-mode .legal-links{z-index:40;color:#fff}
.cinema-mode #artist{mix-blend-mode:normal}
.cinema-mode .number,.cinema-mode .object-shortcuts a,.cinema-mode .legal-links a{color:#fff!important}
.cinema-mode .legal-links{background:#000}
.cinema-mode #artwork-overview{z-index:45;background:#000}
@media(max-width:760px){.cinema-layer{padding:64px 0 50px}.cinema-layer .cinema-video{max-height:calc(100dvh - 150px)}.cinema-caption{font-size:12px}}

/* Quiet video framing on the original gallery background. */
.display .video-section{order:0;width:100%}
.display .additional-video-section{order:2}
.video-section .video-caption{margin:18px 0 24px;padding:0;font-size:13px;line-height:1.5;color:#555;width:100%}
.video-caption>span{display:block}
.display .video-section video,.cinema-layer .cinema-video{outline:none;border:0}
body.cinema-mode,.cinema-layer,.cinema-mode .legal-links,.cinema-mode #artwork-overview{background:#f7f7f7;color:#161616}
.cinema-caption,.cinema-mode #artist,.cinema-mode #index,.cinema-mode .legal-links{color:#161616}
.cinema-mode .number,.cinema-mode .object-shortcuts a,.cinema-mode .legal-links a{color:#161616!important}
@media(max-width:760px){.video-section .video-caption{font-size:12px}}

/* Images use the same full-window presentation as films. */
.expandable-image{cursor:zoom-in}
.expandable-image:focus-visible{outline:1px solid #777;outline-offset:3px}
.cinema-layer .cinema-image{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 170px);object-fit:contain;cursor:zoom-out;margin:0}
@media(max-width:760px){.cinema-layer .cinema-image{max-height:calc(100dvh - 150px)}}

/* Compact thumbnail rows extending down from the hovered number. */
.number-previews{display:grid;grid-template-columns:repeat(min(4,var(--object-count)),minmax(0,1fr));width:calc(min(4,var(--object-count))*80px + 8px);gap:0;align-items:start}
.number-previews a{width:100%;max-width:none;aspect-ratio:4/3;overflow:hidden}
.number-previews .number-preview{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
@media(max-width:760px){.number-previews{grid-template-columns:repeat(min(3,var(--object-count)),minmax(0,1fr));width:calc(min(3,var(--object-count))*60px + 8px)}.number-previews a{max-width:none}.number-previews .number-preview{max-height:none}}

/* Prefer black digits; use white only over dark image/video pixels. */
.cinema-mode .number{color:#111!important}
.cinema-mode .number.on-dark-media{color:#fff!important}

/* Place the preview grid directly below its letter shortcuts. */
.number-previews{top:100%;right:0;padding:6px 0 0;transform:none;max-width:calc(92vw - 60px);width:calc(min(4,var(--object-count))*80px)}
.entry.preview-open,.entry.keyboard-preview{z-index:3}
@media(max-width:760px){.number-previews{max-width:calc(100vw - 65px);width:calc(min(3,var(--object-count))*60px)}}

/* Match the following images to the first artwork's displayed width. */
.display img.additional-image{width:var(--first-artwork-width,100%);max-width:100%;height:auto;max-height:none}

/* Preserve each thumbnail's original proportions in wrapping rows. */
.number-previews{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;gap:0}
.number-previews a{flex:0 0 auto;width:auto;max-width:100%;aspect-ratio:auto;overflow:visible}
.number-previews .number-preview{width:auto;height:62px;max-width:100%;max-height:none;object-fit:contain}
@media(max-width:760px){.number-previews .number-preview{height:42px;max-height:none}}

/* This film's black surround extends sideways only, not into its caption. */
.portfolio-page #gallery{width:100vw;padding-right:calc(8vw + 250px)}
.video-edge-band{position:relative;isolation:isolate;width:100%}
.video-edge-band::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-32px;width:100vw;background:#000;pointer-events:none}
.display .video-edge-band video.additional-image{width:100%;height:auto;max-height:none}
@media(max-width:760px){.portfolio-page #gallery{padding-right:56px}.video-edge-band::before{left:-16px}}


/* Film notes: readable paragraphs with discreet source references. */
.film-editorial{max-width:72ch;margin:36px 0 0;color:#444}
.film-editorial section+section{margin-top:28px}
.film-editorial h3{font:500 13px/1.4 'Helvetica Neue',Helvetica,Arial,sans-serif;margin:0 0 10px;color:#222}
.film-editorial p{font-size:13px;line-height:1.5;margin:0;text-wrap:pretty}
.film-sources{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px}
.film-sources a{font-size:11px;line-height:1.4;color:#777;text-decoration:none}
.film-sources a:hover{text-decoration:underline}
@media(max-width:760px){.film-editorial{margin-top:28px}.film-editorial p{font-size:12px}.film-editorial h3{font-size:12px}}

/* Selected gallery numbers use their artwork colour without blend effects. */
.portfolio-page:not(.cinema-mode) .number{mix-blend-mode:normal;color:#767676}
.portfolio-page:not(.cinema-mode) .number:hover,.portfolio-page:not(.cinema-mode) .number[aria-expanded=true]{color:var(--number-active-color,#161616)!important}

/* The overview floats as images only, without a backdrop or panel. */
#artwork-overview,.cinema-mode #artwork-overview{background:transparent;border:0;box-shadow:none;padding:0}
.overview-series,.overview-series a{background:transparent;border:0;box-shadow:none}

.overview-series video{display:block;width:100%;height:100%;max-width:none;object-fit:contain;background:transparent}

/* Continuous exhibition: native scrolling and stable navigation. */
.portfolio-page #gallery{scroll-behavior:auto;overscroll-behavior-y:auto;touch-action:pan-y}
.display{position:relative;min-height:80svh;padding-bottom:clamp(100px,18svh,190px);scroll-margin-top:32px}
.wireframe-slot{height:calc(100svh - 64px)}
.wireframe-slot .wireframe{position:absolute;inset:auto;left:-32px;top:-32px;width:100vw;height:100dvh}
#page-progress,.page-progress,.scroll-progress{display:none!important}
@media(max-width:760px){.display{scroll-margin-top:20px}.wireframe-slot .wireframe{left:-16px;top:-20px}.wireframe-slot{height:calc(100svh - 40px)}}

/* Smaller supporting stills for Khaos — Begegnung; videos retain their size. */
#image-1 img.additional-image{width:calc(var(--first-artwork-width,100%) * .62);max-width:62%}