* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; max-width:100%; overflow-x:clip; }
body { background:var(--background); color:var(--text); font:var(--weight) var(--text-size)/var(--line-height) var(--font); -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; color:inherit; }
button { background:transparent; border:0; text-align:left; cursor:pointer; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none!important; }
button:hover,a:hover,.active,#name,#project-title { text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:var(--underline); text-underline-offset:var(--underline-offset); }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
::selection { background:var(--accent); color:white; }
img,video { display:block; max-width:100%; user-select:none; }
h1 { font:inherit; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.bio { position:fixed; top:var(--margin); left:var(--margin); width:calc(100% - 2 * var(--margin)); z-index:110; }
.contact { margin-top:16px; }
#back { margin-top:16px; }
#header::before { content:''; position:fixed; inset:0 0 auto; height:var(--header-bottom); background:var(--background); z-index:99; pointer-events:none; }
.project-nav,.filter-nav,#about { position:fixed; z-index:101; }
.project-nav { top:var(--nav-top,200px); left:var(--margin); }
.filter-nav { top:var(--nav-top,200px); left:calc(var(--margin) + 5 * (var(--column) + var(--gutter))); }
.label { display:block; color:var(--muted); white-space:nowrap; }
#project-list a,#filter-list button { display:block; white-space:nowrap; line-height:var(--line-height); }
#filter-list .clear { margin-top:4px; }
#project-tags { color:#aaa; white-space:normal; }
#fullscreen-open { margin-top:8px; white-space:nowrap; }
#about { top:calc(var(--nav-top,200px) + 80px); left:var(--margin); width:calc(6 * var(--column) + 5 * var(--gutter)); }
#about.expanded { background:var(--background); padding:8px; margin:-8px; max-height:60vh; overflow:auto; }
.plus { display:inline-block; font-size:12px; transition:transform 200ms ease; }
.expanded .plus { transform:rotate(45deg); }
#about-content { margin-top:8px; animation:fade-in 300ms var(--ease); }
#about-content p,#project-links a { display:block; margin-top:8px; }
#project-links a { text-decoration:underline; }
#overview { position:fixed; inset:0; overflow:hidden; z-index:2; }
#plane-viewport { position:absolute; top:var(--header-bottom); left:var(--margin); right:var(--margin); bottom:var(--margin); overflow:hidden; touch-action:none; }
.grid { position:absolute; top:0; left:0; width:100%; display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); align-items:center; gap:var(--gutter); transform-origin:0 0; }
.tile { display:block; min-width:0; }
.tile img,.tile video { width:100%; height:auto; }
#preview { position:fixed; pointer-events:none; z-index:105; }
#preview img,#preview video { width:100%; height:100%; object-fit:contain; }
#project-view { position:fixed; inset:var(--gallery-top,240px) 0 0; padding:0 var(--margin) 16px; z-index:15; display:flex; flex-direction:column; background:var(--background); }
#stage { flex:1; min-height:0; position:relative; }
.slide { position:absolute; inset:0; display:flex; justify-content:center; align-items:center; opacity:0; pointer-events:none; transition:opacity var(--slide-duration) ease; }
.slide.current { opacity:1; pointer-events:auto; }
.slide img,.slide video { width:100%; height:100%; object-fit:contain; }
.slide-controls { display:flex; justify-content:center; gap:24px; align-items:center; margin-top:16px; flex-shrink:0; }
.slide-controls button { min-width:24px; text-align:center; }
#fullscreen { border:0; padding:0; max-width:none; max-height:none; width:100vw; height:100dvh; background:#000; color:#fff; }
#fullscreen::backdrop { background:#000; }
#fullscreen-stage { position:absolute; inset:0; }
#fullscreen-close { position:absolute; top:var(--margin); right:var(--margin); z-index:3; }
#full-prev,#full-next { position:absolute; top:50%; z-index:2; padding:16px; }
#full-prev { left:0; } #full-next { right:0; }
body.project-open #project-nav,body.project-open #filter-nav { display:none; }
#empty { text-align:center; padding:40px; }
.transition-layer { position:fixed; inset:0; background:var(--background); z-index:90; pointer-events:all; overflow:hidden; }
.transition-layer * { pointer-events:none!important; }
@media(min-width:750px) {
 .bio { width:calc(5 * var(--column) + 4 * var(--gutter)); }
 .project-nav { top:16px; left:calc(var(--margin) + 6 * (var(--column) + var(--gutter))); }
 .filter-nav { top:var(--tablet-filter-top,220px); left:16px; }
 #about { top:var(--tablet-filter-top,220px); left:16px; width:calc(5 * var(--column) + 4 * var(--gutter)); }
 #project-view { padding-bottom:40px; }
}
@media(min-width:1024px) {
 .project-nav { left:calc(var(--margin) + 11 * (var(--column) + var(--gutter))); }
 .filter-nav { top:16px; left:calc(var(--margin) + 14 * (var(--column) + var(--gutter))); }
 .project-nav>.label,.filter-nav>.label { position:absolute; right:100%; top:0; padding-right:8px; }
 #about { top:16px; left:calc(var(--margin) + 6 * (var(--column) + var(--gutter))); width:calc(4 * var(--column) + 3 * var(--gutter)); }
}
@media(min-width:2000px) {
 .bio { width:calc(4 * var(--column) + 3 * var(--gutter)); }
 .project-nav { left:calc(var(--margin) + 12 * (var(--column) + var(--gutter))); }
 .filter-nav { left:calc(var(--margin) + 16 * (var(--column) + var(--gutter))); }
 #about { left:calc(var(--margin) + 8 * (var(--column) + var(--gutter))); }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
::-webkit-scrollbar { width:8px; } ::-webkit-scrollbar-track { background:#f5f5f5; } ::-webkit-scrollbar-thumb { background:#ccc; border-radius:4px; }
.negative-lens-clip { position:fixed; overflow:hidden; pointer-events:none; z-index:1000; }
.negative-lens { position:absolute; width:var(--negative-lens-diameter); height:var(--negative-lens-diameter); border-radius:50%; transform:translate(-50%,-50%); background:transparent; -webkit-backdrop-filter:invert(1); backdrop-filter:invert(1); pointer-events:none; }

#stage .slide.current img,#stage .slide.current video { cursor:pointer; }
.project-zoom-layer {position:fixed;inset:0;z-index:90;pointer-events:all;overflow:hidden;}
.project-zoom-layer img,.project-zoom-layer video {position:fixed;object-fit:contain;max-width:none;pointer-events:none;}

/* Language controls use the same typography as the filters. */
#language-switch{position:fixed;top:var(--language-top,var(--nav-top));left:var(--language-left,75vw);right:var(--margin);z-index:111;display:flex;justify-content:flex-end;gap:3px;background:transparent;font:inherit;line-height:var(--line-height)}
#language-switch button{font:inherit;line-height:inherit;padding:0;background:transparent}
body.project-open:not(.mobile-mode) #language-switch{display:none}

.copyright{font-family:var(--font);font-size:calc(var(--text-size) * .75);line-height:1.25;background:transparent;font-weight:var(--weight)}
#desktop-copyright{position:fixed;left:var(--margin);bottom:var(--margin);z-index:111}