:root{color-scheme:dark;--surface:#050505;--ink:#fff;--muted:#aaa}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--surface);color:var(--ink);font-family:Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{color:inherit;font:inherit;-webkit-tap-highlight-color:transparent}button{border:0;background:none;cursor:pointer;padding:8px 0}a{text-decoration:none}button:hover,a:hover{opacity:.55}button:focus-visible,a:focus-visible{outline:1px solid currentColor;outline-offset:5px}header,footer{position:fixed;left:28px;right:28px;z-index:30;display:flex;justify-content:space-between;align-items:flex-start;font-size:13px;line-height:1.15;letter-spacing:-.025em}header{top:24px}#home{font-size:21px;letter-spacing:-.055em}nav{display:flex;gap:32px}nav button{padding-top:0}sup{font-size:8px;vertical-align:top;margin-left:5px}footer{bottom:23px;font-size:11px;line-height:1.15}.discipline{width:180px}.tools{display:flex;gap:28px}.tools button{padding:0}.instruction{text-align:right;width:180px;color:var(--muted)}
#stage{position:fixed;inset:75px 28px 76px;touch-action:none}#field{position:absolute;inset:0}.tile{position:absolute;padding:0;overflow:hidden;background:var(--surface);cursor:grab;transition:none;transform:translate(var(--dx,0px),var(--dy,0px));will-change:transform}.tile:hover{opacity:1!important;z-index:20!important}.tile img{position:absolute;width:100%;height:100%;left:0;top:0;object-fit:cover;pointer-events:none;user-select:none}.tile.dragging{transition:none;cursor:grabbing;z-index:25!important}.tile:focus-visible{outline:1px solid var(--ink);outline-offset:4px}.tile .play{position:absolute;right:10px;bottom:10px;color:var(--ink);font-size:11px;mix-blend-mode:difference}.tile .cellNumber{position:absolute;left:8px;bottom:6px;font-size:9px;color:#111}#sceneNote{position:absolute;bottom:0;left:0;font-size:9px;color:var(--muted);pointer-events:none}body[data-layout="frame"]{background:var(--surface);color:var(--ink)}body[data-layout="frame"] .instruction{color:var(--muted)}body{transition:none}body[data-layout="frame"] #stage{inset:0}body[data-layout="frame"] #sceneNote{display:none}body[data-layout="frame"] header,body[data-layout="frame"] footer{text-shadow:0 1px 6px #0009}.ambientVideo{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
dialog{position:fixed;max-width:none;max-height:none;width:100%;height:100%;margin:0;border:0;padding:24px 28px;background:var(--surface);color:var(--ink);overflow:auto}dialog::backdrop{background:var(--surface)}.panelhead{display:flex;justify-content:space-between;font-size:13px;letter-spacing:-.025em;margin-bottom:65px}.panelhead button{padding:0}.filters{display:flex;gap:28px;margin-bottom:28px;font-size:12px}.filters button{padding:4px 0;border-bottom:1px solid transparent}.filters .active{border-color:var(--ink)}.editorialBoard{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 17px}.editorialBoard button{padding:0;text-align:left}.editorialBoard img{display:block;width:100%;height:230px;object-fit:contain;object-position:left center}.editorialBoard span{display:block;font-size:10px;line-height:1.25;padding-top:12px}#info h1{font-size:clamp(60px,9.7vw,145px);line-height:.86;letter-spacing:-.075em;font-weight:400;margin:10vh 0 8vh}.infoDetail{display:grid;grid-template-columns:1fr 1fr;font-size:14px;line-height:1.3}.infoDetail p{margin:0}.links{display:flex;flex-direction:column;align-items:flex-start;gap:13px}#viewerContent{height:calc(100dvh - 160px);display:flex;align-items:center;justify-content:center}#viewerContent img{max-width:100%;max-height:100%;object-fit:contain}#viewerContent iframe{width:100%;height:100%;border:0}.viewerNav{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-top:15px}#viewer .panelhead{margin-bottom:25px}
@media(max-width:700px){header,footer{left:17px;right:17px}header{top:19px}#home{font-size:19px}nav{gap:23px;font-size:12px}footer{bottom:19px;font-size:10px}.discipline{width:auto}.instruction{display:none}.tools{gap:20px}#stage{inset:70px 17px 72px}dialog{padding:19px 17px}.panelhead{margin-bottom:45px}.editorialBoard{grid-template-columns:repeat(2,1fr);gap:30px 14px}.editorialBoard img{height:180px}.infoDetail{grid-template-columns:1fr;gap:30px}#info h1{font-size:12vw;margin-top:15vh}.filters{gap:22px}}
@media(prefers-reduced-motion:reduce){body,.tile{transition:none}}

.movingPicture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.viewerClip{width:100%;height:100%;object-fit:contain}.approaches{display:flex;gap:20px;font-size:11px}.approaches button{padding:0;color:var(--muted)}.approaches .active{color:inherit;border-bottom:1px solid currentColor}.instruction{display:none}@media(max-width:700px){.approaches{gap:12px;font-size:10px}.tools{gap:12px}.discipline{font-size:9px;width:95px}}

.identity{display:flex;flex-direction:column;align-items:flex-start;gap:9px}#signal{padding:0;line-height:0}#signal img{display:block;width:90px;height:15px;image-rendering:pixelated}@media(max-width:700px){.identity{gap:6px}#signal img{width:72px;height:12px}}

header #signal{position:absolute;left:50%;top:0;transform:translateX(-50%);width:90px;height:15px;image-rendering:pixelated}@media(max-width:700px){header #signal{width:60px;height:10px;top:3px}}

/* Editorial moodboard: complete images, varied columns and irregular whitespace. */
#index .panelhead{margin-bottom:42px}#index .filters{margin-bottom:65px}
.editorialBoard{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;gap:75px 26px;padding-bottom:90px;grid-auto-flow:row}
.editorialBoard .boardItem{grid-column:span var(--span);padding:var(--offset) 0 0;text-align:left;min-width:0;opacity:1}
.editorialBoard .boardMedia{position:relative;width:100%;aspect-ratio:var(--ratio);background:var(--surface)}
.editorialBoard .boardMedia img,.editorialBoard .boardClip{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center;pointer-events:none}
.editorialBoard .boardCaption{display:grid;grid-template-columns:28px 1fr;gap:8px;margin-top:12px;max-width:100%;font-size:10px;line-height:1.35;color:var(--muted)}
.editorialBoard .boardCaption span{display:block;padding:0;font-size:10px}.editorialBoard .boardNumber{color:var(--muted)}.editorialBoard .boardItem:hover .boardCaption{color:var(--ink)}
@media(max-width:700px){#index .panelhead{margin-bottom:35px}#index .filters{margin-bottom:30px}.editorialBoard{grid-template-columns:repeat(2,minmax(0,1fr));gap:35px 15px;padding-bottom:40px}.editorialBoard .boardItem{grid-column:span var(--mobile-span);padding-top:calc(var(--offset)*.4)}.editorialBoard .boardCaption{grid-template-columns:23px 1fr;gap:5px;font-size:9px}.editorialBoard .boardCaption span{font-size:9px}}

/* The photographs extend to, and sometimes beyond, the viewport edges. */
#stage{inset:0;overflow:hidden}body[data-layout="frame"] #stage{inset:0}
header,footer{mix-blend-mode:difference}#sceneNote{left:28px;bottom:55px}
#index{padding:24px 0;overflow-x:hidden}#index .panelhead,#index .filters{margin-left:28px;margin-right:28px}
.editorialBoard{column-gap:0}.editorialBoard .boardMedia{transform:translateX(var(--bleed));width:calc(100% + 3vw)}.editorialBoard .boardCaption{padding:0 14px}
@media(max-width:700px){#stage{inset:0}#index{padding:19px 0}#index .panelhead,#index .filters{margin-left:17px;margin-right:17px}.editorialBoard{column-gap:0}.editorialBoard .boardCaption{padding:0 10px}#sceneNote{left:17px;bottom:50px}}

header,footer{font-size:11px}#home{font-size:inherit;letter-spacing:inherit}@media(max-width:700px){header,footer,nav{font-size:10px}#home{font-size:inherit}.discipline{font-size:inherit}}

/* Large, centered editorial compositions with occasional edge bleed. */
.editorialBoard{row-gap:50px}.editorialBoard .boardItem{grid-column:var(--start) / span var(--span)}.editorialBoard .boardMedia{width:100%}
@media(max-width:700px){.editorialBoard{row-gap:30px}.editorialBoard .boardItem{grid-column:span var(--mobile-span)}}

#scrollPage{display:none;position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;padding:90px 0 100px;overflow-anchor:none;scrollbar-width:thin;scrollbar-color:var(--muted) var(--surface)}
body[data-approach="scroll"] #stage{display:none}body[data-approach="scroll"] #scrollPage{display:block}
#scrollGrid{display:block;padding-bottom:90px}#scrollGrid .boardItem{display:block;position:relative;width:var(--mobile-width);margin-left:var(--mobile-shift);margin-top:var(--mobile-gap);padding:0;isolation:isolate}#scrollGrid .boardCaption{display:none}
#scrollGrid .boardMedia{max-height:none}#scrollGrid .boardMedia img,#scrollGrid .boardClip{object-fit:contain}
@media(max-width:700px){#scrollPage{padding:75px 0 85px}#scrollGrid{row-gap:40px}#scrollGrid .boardItem{grid-column:1 / -1}#scrollGrid .boardMedia{max-height:75dvh}.approaches{gap:10px}}

/* Geometric HTML arrows, independent of emoji fonts on iOS. */
.arrow{display:inline-block;position:relative;width:.85em;height:.85em;vertical-align:-.04em;color:inherit;flex:none}
.arrow::before{content:"";position:absolute;left:0;right:.1em;top:50%;border-top:1px solid currentColor}
.arrow::after{content:"";position:absolute;right:.1em;top:50%;width:.42em;height:.42em;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:translateY(-50%) rotate(45deg)}
.arrow-diagonal{transform:rotate(-45deg)}.arrow-left{transform:rotate(180deg)}

/* Mobile journal: staggered, overlapping images extending past the screen. */
@media(max-width:700px){
 #scrollPage{padding-top:65px}
 #scrollGrid{display:block;padding-bottom:60px}
 #scrollGrid .boardItem{display:block;position:relative;width:var(--mobile-width);margin-left:var(--mobile-shift);margin-top:var(--mobile-gap);padding:0;isolation:isolate}
 #scrollGrid .boardMedia{width:100%;max-height:none;transform:none}
 #scrollGrid .boardCaption{display:none}
}

/* Small, loosely arranged index thumbnails. */
#index #grid{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;gap:24px 0;padding:0 24px 65px}
#index #grid .boardItem{flex:0 0 auto;width:var(--thumb-width);padding:0;margin:var(--thumb-offset) var(--thumb-space) 0}
#index #grid .boardMedia{width:100%;transform:none;max-height:none}
#index #grid .boardCaption{display:block;padding:0;margin-top:5px;font-size:7px;line-height:1.2;color:var(--muted)}
#index #grid .boardCaption span{display:inline;padding:0;font-size:7px}
#index #grid .boardNumber{margin-right:5px;color:var(--muted)}
#scrollGrid .boardItem{max-width:min(calc(var(--native-width) * var(--scroll-scale)),calc(860px * var(--scroll-scale)),calc(82dvh * var(--aspect) * var(--scroll-scale)))}
#scrollGrid .boardMedia{transform:none}
@media(max-width:700px){#index #grid{gap:18px 0;padding:0 8px 50px}#scrollGrid .boardItem{max-width:min(calc(var(--native-width) * var(--scroll-scale)),calc(82dvh * var(--aspect) * var(--scroll-scale)))}}

/* Index: compact, mixed-scale photographic contact sheet. */
#index #grid{gap:11px 0;padding:0 12px 55px;align-content:flex-start}
#index #grid .boardItem{max-width:calc(100vw - 28px)}
#index #grid .boardCaption{margin-top:4px}
@media(max-width:700px){#index #grid{gap:9px 0;padding:0 5px 45px}}

/* Regular-width grotesk typography; scale and spacing establish hierarchy. */
html,body{font-family:Helvetica,Arial,sans-serif;font-stretch:normal;font-weight:400}
header,footer,.panelhead{letter-spacing:-.015em}
header,footer{font-size:12px;line-height:1.2}
#home{font-size:inherit;letter-spacing:-.02em}
.filters{letter-spacing:-.015em}
#index #grid .boardCaption{line-height:1.3;letter-spacing:0}

/* Info: display introduction, readable supporting copy and an offset photograph. */
#info{background:var(--surface);color:var(--ink);padding:24px 28px 0;font-family:inherit;overscroll-behavior:contain;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--muted) var(--surface)}
#info .panelhead{display:grid;grid-template-columns:1fr 1fr auto;align-items:start;gap:20px;margin:0;font-size:12px;line-height:1.3}
#info .panelhead button{text-align:right}
#info .info-nav-label{justify-self:start;color:var(--muted)}
#info .info-layout{width:100%;margin:0 auto}
#info .info-lede{padding:clamp(38px,5vw,80px) 0 clamp(64px,7vw,112px)}
#info h1{font-family:inherit;font-size:clamp(2.25rem,4.05vw,4.75rem);line-height:1.1;letter-spacing:-.03em;font-weight:400;font-stretch:normal;margin:0;max-width:none;text-indent:16.666%;text-wrap:pretty}
#info .info-intro{font-size:clamp(1.125rem,1.6vw,1.5rem);line-height:1.45;letter-spacing:-.01em;margin:1.5rem 0 0 16.666%;max-width:48ch;text-wrap:pretty}
#info .info-editorial{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
#info .info-meta{display:grid;grid-template-columns:1fr;row-gap:48px;padding-top:3px;align-content:start}
#info .info-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px;min-width:0}
#info .info-section h2{font-size:.75rem;font-weight:400;letter-spacing:0;line-height:1.5;margin:0;padding-top:.25rem;color:var(--muted)}
#info .info-section p,#info .links a{font-size:1rem;line-height:1.5;letter-spacing:0;margin:0;overflow-wrap:anywhere}
#info .links{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
#info .links a{padding:0;text-decoration:none;overflow-wrap:anywhere}
#info .links a:hover{text-decoration:underline;text-underline-offset:3px;opacity:1}
#info .info-photo{margin:0;min-width:0}
#info .info-photo img{display:block;width:100%;height:auto;filter:none}
#info .info-photo figcaption{margin-top:9px;font-size:10px;line-height:1.3;letter-spacing:0;color:var(--muted)}
#info .info-endnote{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;padding:clamp(100px,13vw,230px) 0 0;font-size:12px;line-height:1.3;letter-spacing:-.015em}
#info .info-endnote span:nth-child(3){grid-column:1/-1;display:block;margin:clamp(42px,7vw,110px) 0 0 -.012em;font-size:clamp(100px,27.2vw,600px);font-weight:400;line-height:.83;letter-spacing:-.065em;white-space:nowrap;padding-bottom:.08em}

@media(max-width:800px){
 #info{padding:20px 20px 0}
 #info .panelhead{grid-template-columns:1fr auto;gap:12px;font-size:11px}
 #info .info-nav-label{display:none}
 #info .info-lede{padding:50px 0 76px}
 #info h1{font-size:clamp(2rem,5.5vw,2.75rem);line-height:1.12;letter-spacing:-.025em;text-indent:12%}
 #info .info-intro{margin-left:12%;font-size:1.125rem}
 #info .info-editorial{grid-template-columns:1fr 1fr;gap:24px}
 #info .info-section{grid-template-columns:1fr;gap:10px}
 #info .info-meta{row-gap:32px}
 #info .info-section h2{font-size:.75rem;padding-top:0}
 #info .info-section p,#info .links a{font-size:1rem}
 #info .info-endnote{padding-top:100px;font-size:11px;gap:0 24px}
 #info .info-endnote span:nth-child(3){font-size:26vw;margin-top:54px}
}
@media(max-width:540px){
 header,footer,nav{font-size:11px}
 #info{padding:19px 17px 0}
 #info .info-lede{padding:42px 0 60px}
 #info h1{font-size:clamp(1.75rem,7.5vw,2.5rem);line-height:1.12;letter-spacing:-.02em;text-indent:0}
 #info .info-intro{margin:1.25rem 0 0;max-width:32ch}
 #info .info-editorial{grid-template-columns:minmax(0,1fr);gap:54px}
 #info .info-meta{grid-template-columns:1fr 1fr;gap:30px 18px}
 #info .info-contact{grid-column:1/-1}
 #info .info-contact .links{gap:6px}
 #info .info-photo{width:84%;justify-self:end}
 #info .info-endnote{padding-top:80px;grid-template-columns:1fr 1fr;gap:12px}
 #info .info-endnote span:nth-child(2){text-align:right}
 #info .info-endnote span:nth-child(3){font-size:25.8vw;margin-top:32px}
}

/* Index reference: narrow archive columns beneath an oversized title. */
#index{position:fixed;isolation:isolate;padding-top:24px}
#index .panelhead,#index .filters{position:relative;z-index:5}
#index .panelhead{margin-bottom:28px}
#index .filters{margin-bottom:42px}
#index::before{content:"Andrija Kovač\A Index/";white-space:pre;position:fixed;z-index:3;top:36vh;left:19%;font-family:inherit;font-size:clamp(66px,11.8vw,240px);font-weight:400;line-height:.94;letter-spacing:-.06em;color:var(--ink);pointer-events:none;mix-blend-mode:difference}
#index #grid{display:block;columns:8;column-gap:4.5vw;padding:0 20px 90px}
#index #grid .boardItem{display:block;break-inside:avoid;page-break-inside:avoid;width:100%;max-width:none;margin:0 0 calc(28px + var(--thumb-offset)*1.8);padding:var(--thumb-offset) 0 0;position:relative}
#index #grid .boardMedia{width:100%;transform:none;aspect-ratio:var(--ratio)}
#index #grid .boardCaption{display:flex;flex-direction:column;gap:3px;margin-top:7px;padding:0;font-size:9px;line-height:1.3;letter-spacing:0;color:var(--muted);overflow-wrap:anywhere}
#index #grid .boardCaption span{display:block;font-size:inherit;padding:0}
#index #grid .boardNumber{order:2;color:var(--muted);margin:0;font-variant-numeric:tabular-nums}
#index #grid .boardItem:hover,#index #grid .boardItem:focus-visible{z-index:4;opacity:1}
@media(min-width:1800px){#index #grid{columns:10}}
@media(max-width:1100px){#index #grid{columns:6;column-gap:4.5vw}}
@media(max-width:800px){#index #grid{columns:4;column-gap:6vw}#index::before{left:12%;font-size:13vw;top:34vh}}
@media(max-width:540px){
 #index{padding-top:19px}
 #index .panelhead{margin-bottom:25px}
 #index .filters{margin-bottom:30px}
 #index #grid{columns:3;column-gap:7vw;padding:0 17px 60px}
 #index #grid .boardItem{margin-bottom:calc(22px + var(--thumb-offset)*1.5)}
 #index #grid .boardCaption{font-size:8px;gap:2px;margin-top:5px}
 #index::before{top:35vh;left:8%;font-size:14vw;line-height:.98}
}

/* Continuous grayscale surface; media retain their original colour. */
header,footer{mix-blend-mode:normal;color:var(--ink)}
header a,header nav,footer>.discipline,footer>.approaches,footer>.tools{background:var(--surface)}
#index::before{color:var(--ink);mix-blend-mode:normal}
::selection{background:var(--ink);color:var(--surface)}
html{scrollbar-color:var(--muted) var(--surface)}
/* Larger Index thumbnails, above the fixed background title. */
#index::before{z-index:0}
#index #grid{position:relative;z-index:1;columns:6;--index-thumb-width:calc((68.5vw - 40px)*.1625)}
#index #grid .boardItem{width:var(--index-thumb-width);max-width:100%;margin-left:auto;margin-right:auto}
#index #grid .boardCaption{background:var(--surface)}
@media(min-width:1800px){#index #grid{columns:8;--index-thumb-width:calc((59.5vw - 40px)*.13)}}
@media(max-width:1100px){#index #grid{columns:4;--index-thumb-width:calc((77.5vw - 40px)*.216666667)}}
@media(max-width:800px){#index #grid{columns:3;--index-thumb-width:calc((82vw - 40px)*.325)}}
@media(max-width:540px){#index #grid{columns:2;--index-thumb-width:calc((86vw - 34px)*.433333333)}}

/* Floating archive title. */
.motion-index-title{position:fixed;z-index:0;top:36vh;left:19%;font:400 clamp(66px,11.8vw,240px)/.94 Helvetica,Arial,sans-serif;letter-spacing:-.06em;white-space:pre;pointer-events:none;color:var(--ink)}
.has-floating-archive #index::before{content:none}
@media(max-width:800px){.motion-index-title{left:12%;font-size:13vw;top:34vh}}
@media(max-width:540px){.motion-index-title{top:35vh;left:8%;font-size:14vw}}



/* Full-film action below the clip, aligned to its bottom-right edge. */
#viewerContent{padding-inline:clamp(12px,3vw,44px)}
#viewerContent>.viewerFilm{display:flex;flex-direction:column;align-items:stretch;justify-content:center;min-width:0;max-width:100%;width:min(100%,calc((100dvh - 195px) * var(--film-ratio)));height:100%}
#viewerContent .viewerFilm>.viewerClip{display:block;position:static;flex:1 1 auto;min-height:0;width:100%;height:calc(100% - 28px);max-height:calc(100% - 28px);object-fit:contain}
#viewerContent .viewerFilm>.watchFilm{flex:0 0 auto;align-self:flex-end;margin-top:8px;padding:3px 0;color:var(--ink);font-family:Helvetica,Arial,sans-serif;font-weight:400;font-size:11px;line-height:1.3;letter-spacing:0;text-transform:none;white-space:nowrap;text-align:right;border:0}
#viewerContent .viewerFilm>.watchFilm:hover{text-decoration:underline;text-underline-offset:3px}
#filmLightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:clamp(18px,3vw,40px);background:#070707;color:#fff;overflow:hidden;border:0}
#filmLightbox::backdrop{background:rgba(0,0,0,.9)}
.filmLightboxHead{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;margin-bottom:20px}
.filmLightboxHead button{padding:4px 0;font-size:11px}
.filmLightboxFrame{width:100%;height:calc(100% - 54px);display:flex;justify-content:center;align-items:center}
.filmLightboxFrame iframe{display:block;width:100%;max-width:calc(82dvh * 16 / 9);aspect-ratio:16/9;max-height:100%;height:auto;border:0;background:#000}
@media(max-width:700px){
 #viewerContent{padding-inline:0}
 #viewerContent>.viewerFilm{width:min(100%,calc((100dvh - 195px) * var(--film-ratio)))}
 #viewerContent .viewerFilm>.watchFilm{font-size:10px;margin-top:7px}
 #filmLightbox{padding:17px}
 .filmLightboxFrame{height:calc(100% - 45px)}
 .filmLightboxFrame iframe{max-width:100%}
}

/* About: second statement shares the opening headline scale and typography. */
#info .info-intro{font-family:inherit;font-size:clamp(2.25rem,4.05vw,4.75rem);font-weight:400;line-height:1.1;letter-spacing:-.03em;max-width:none;margin:1.5rem 0 0 16.666%;text-wrap:pretty}
@media(max-width:800px){#info .info-intro{font-size:clamp(2rem,5.5vw,2.75rem);line-height:1.12;letter-spacing:-.025em;margin-left:12%}}
@media(max-width:540px){#info .info-intro{font-size:clamp(1.75rem,7.5vw,2.5rem);line-height:1.12;letter-spacing:-.02em;margin:1.25rem 0 0;max-width:none}}

/* Slideshow: one full-frame image/clip, preserving the original composition. */
#slideshowPage{display:none;position:fixed;inset:0;overflow:hidden;background:var(--surface)}
body[data-approach="slideshow"] #stage,body[data-approach="slideshow"] #scrollPage{display:none}
body[data-approach="slideshow"] #slideshowPage{display:flex;align-items:center;justify-content:center}
#slideshowPage .slideshowMedia{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;background:transparent}
#slideshowPage video.slideshowMedia{pointer-events:none}
@media(max-width:700px){.approaches{gap:10px;font-size:10px}}

/* Mobile slideshow crops symmetrically to fill the full vertical viewport. */
@media(max-width:700px){#slideshowPage{height:100dvh}#slideshowPage .slideshowMedia{width:100%;height:100%;object-fit:cover;object-position:center center}}

/* Subtle floating-archive push-in for slideshow photographs only.
   Each still is visible for 0.4s, with a 3% slow zoom. */
@keyframes slideshowPhotoDrift {
 from{transform:scale(1)}
 to{transform:scale(1.03)}
}
body[data-approach="slideshow"] #slideshowPage img.slideshowMedia{
 transform-origin:center center;
 animation:slideshowPhotoDrift var(--slideshow-photo-duration,0.4s) linear both;
 will-change:transform;
}
@media(prefers-reduced-motion:reduce){
 body[data-approach="slideshow"] #slideshowPage img.slideshowMedia{animation:none;will-change:auto}
}

/* Slideshow pace control; a single multiplier keeps the photo/video timing ratio. */
.slideshow-speed{display:none;position:absolute;bottom:calc(100% + 18px);left:50%;transform:translateX(-50%);align-items:center;gap:12px;padding:8px 12px;background:var(--surface);color:var(--ink);font-size:11px;line-height:1.3;white-space:nowrap}
body[data-approach="slideshow"] .slideshow-speed{display:flex}
.slideshow-speed input{width:140px;height:28px;margin:0;accent-color:var(--ink);cursor:ew-resize}
.slideshow-speed input:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.slideshow-speed output{min-width:205px;font-variant-numeric:tabular-nums}
@media(max-width:600px){
 .slideshow-speed{width:max-content;max-width:calc(100vw - 34px);display:none;flex-wrap:wrap;justify-content:center;gap:0 12px;padding:6px 10px;bottom:calc(100% + 14px)}
 .slideshow-speed input{width:160px;max-width:50vw;height:32px}
 .slideshow-speed output{flex-basis:100%;min-width:0;text-align:center;font-size:10px}
}

/* Site-wide Swiss grotesk typography and restrained archive masthead. */
html,body,button,input,select,textarea,#info,#viewerContent .viewerFilm>.watchFilm,.motion-index-title{font-family:Helvetica,Arial,sans-serif}
#index::before{content:"Xtrapurified/\\A Andrija Kovač\\A Index/";font-family:Helvetica,Arial,sans-serif;font-size:clamp(44px,8.1vw,160px);line-height:.98;letter-spacing:-.045em;top:28vh;left:12%;color:#676767;white-space:pre;}
.motion-index-title{font-family:Helvetica,Arial,sans-serif;font-size:clamp(44px,8.1vw,160px);line-height:.98;letter-spacing:-.045em;top:28vh;left:12%;color:#676767;white-space:pre}
@media(max-width:800px){#index::before,.motion-index-title{top:32vh;left:8%;font-size:9.3vw}}
@media(max-width:540px){#index::before,.motion-index-title{top:34vh;left:6%;font-size:9.5vw;line-height:1.03}}

/* Bolder, larger Index masthead; larger thumbnail contact sheet. */
#index::before,.motion-index-title{
 font-weight:700;
 font-size:clamp(64px,11vw,225px);
 line-height:.93;
 letter-spacing:-.038em;
 top:25vh;
 left:6%;
}
#index #grid{columns:5;--index-thumb-width:17.5vw;column-gap:3vw}
#index #grid .boardItem{width:var(--index-thumb-width);max-width:100%}
@media(min-width:1800px){
 #index #grid{columns:6;--index-thumb-width:14vw}
}
@media(max-width:1100px){
 #index #grid{columns:4;--index-thumb-width:21vw}
 #index::before,.motion-index-title{font-size:11.2vw;top:29vh;left:5%}
}
@media(max-width:800px){
 #index #grid{columns:3;--index-thumb-width:27vw}
 #index::before,.motion-index-title{font-size:12vw;top:31vh;left:4%}
}
@media(max-width:540px){
 #index #grid{columns:2;--index-thumb-width:43vw;column-gap:4vw;padding-left:10px;padding-right:10px}
 #index::before,.motion-index-title{font-size:12vw;top:34vh;left:3%;line-height:.97}
}

/* Typography refinement: medium-weight masthead; homepage corners match Index header. */
#index::before,.motion-index-title{font-weight:500}
header,footer,header nav,footer .discipline,footer .approaches,footer .tools,footer .instruction,header #home{
 font-size:13px;
 line-height:1.2;
 letter-spacing:-.015em;
 font-weight:400;
}
@media(max-width:700px){
 header,footer,header nav,footer .discipline,footer .approaches,footer .tools,footer .instruction,header #home{
  font-size:13px;
 }
 footer .discipline{width:auto;max-width:32vw}
 footer .approaches{gap:10px}
}

/* Header colour bar: 30% larger, retaining its centered position and aspect ratio. */
header #signal{width:117px;height:19.5px}
@media(max-width:700px){header #signal{width:78px;height:13px}}

/* Simplified footer, with the color bar raised five pixels. */
header #signal{top:-5px}
@media(max-width:700px){header #signal{top:-2px}}

/* Keep legacy player bindings for reliable startup while removing controls visually. */
footer .tools, footer .slideshow-speed, body[data-approach="slideshow"] footer .slideshow-speed{display:none!important}

/* Quiet copyright line in the Info endnote. */
#info .info-endnote span:nth-child(3){color:#666}