/* ========================================================================== Global post-processing layer ========================================================================== #screen holds the entire visible site and carries the chromatic aberration for all of it at once. See js/post.js for why this is a filter on a fixed scroll container rather than a backdrop-filter or a WebGL pass. ========================================================================== */ #screen { /* Fixed and viewport-sized, with the page scrolling INSIDE it. This keeps the filter region equal to the viewport at every scroll position, so the cost of the pass does not grow with the length of a case study, and it keeps fixed-position overlays resolving against the viewport rather than against a document-height filtered box. */ position: fixed; inset: 0; overflow: hidden; /* Scroll bar hidden on the pages that scroll (the case studies) — the scroll still works by wheel/trackpad/touch/keys, only the bar is suppressed (feedback 2026-09-01). */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* legacy Edge */ } #screen::-webkit-scrollbar { width: 0; height: 0; display: none; } /* WebKit/Blink */ /* Applied by js/post.js once the filter exists in the document. Gating it on the attribute means the page is never briefly filtered by a url() that has not been defined yet, which renders as fully transparent in some engines. */ #screen[data-post] { filter: url(#post-chroma); } /* Not on touch screens. iOS Safari re-filters the whole scrolling screen on the CPU every frame (an SVG filter on the scroll container), falls behind mid-scroll and leaves unpainted holes in the page; at 0.4px on a phone the split is invisible anyway. */ @media (hover: none) and (pointer: coarse) { #screen[data-post] { filter: none; } } /* The work view scrolls; the home view is a fixed composition. The rule lives here rather than on because #screen is the scroll container now. */ body[data-view='work'] #screen { overflow-y: auto; overflow-x: hidden; } body[data-scroll-locked] #screen { overflow: hidden; } /* Reduced motion keeps the aberration - it is static, a property of the display, and involves no movement at all. Nothing to reduce. */