:root{--black:#000;--white:#fff;--gray:#555;--gray-light:#ebebeb;--shader-red:#f20;--shader-green:#0c4;--shader-blue:#04f;--shader-yellow:#fd0;--fg:var(--black);--fg-muted:var(--gray);--fg-inverse:var(--white);--bg:var(--gray-light);--bg-canvas:var(--white);--bg-inverse:var(--black);--line:var(--black);--sans:"Inter", system-ui, sans-serif;--mono:ui-monospace, Menlo, Consolas, "SF Mono", monospace;--t-xs:.7rem;--t-sm:.85rem;--t-md:1rem;--t-xl:clamp(2rem, 5vw, 3rem);--track-tight:-.035em;--track-wide:.25em;--track-ui:.04em;--track-btn:.12em;--s-1:.25rem;--s-2:.5rem;--s-3:1rem;--s-4:1.5rem;--s-5:2rem;--s-6:3rem;--rule:1px solid var(--black);--radius:0;--main-padh:var(--s-1);--main-padv:var(--s-1);--col:360px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--sans);font-size:var(--t-md);color:var(--black);-webkit-font-smoothing:antialiased}h1{font-size:var(--t-xl);letter-spacing:var(--track-tight);line-height:.95}main>.intro h1{white-space:nowrap;font-size:clamp(2rem,5vw,2.5rem)}.proj-side .intro h1{text-wrap:balance;overflow-wrap:break-word;font-size:clamp(1.75rem,3.5vw,2.25rem)}canvas#grid{z-index:0;width:100vw;height:100vh;position:fixed;inset:0}main{z-index:1;width:var(--col);min-height:100vh;padding:var(--main-padv) var(--main-padh);background:var(--gray-light);gap:var(--s-6);flex-direction:column;display:flex;position:relative}main a{padding:var(--s-2) var(--main-padh);font-family:var(--sans);font-size:var(--t-sm);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--black);text-decoration:none;display:block}main a:hover{background:var(--black);color:var(--white)}main a.back{font-family:var(--mono);text-transform:lowercase;letter-spacing:0;font-size:var(--t-xs);padding:var(--s-1) var(--main-padh)}.about a{font-size:inherit;letter-spacing:inherit;text-transform:none;text-underline-offset:.15em;color:var(--gray);padding:0;text-decoration:underline;display:inline}.about a:hover{color:var(--black);background:0 0}section{gap:var(--s-3);flex-direction:column;display:flex}.intro{gap:var(--s-1)}.tag{font-size:var(--t-sm);color:var(--gray);letter-spacing:var(--track-tight)}.bio{font-size:var(--t-sm);color:var(--gray);text-wrap:pretty;-webkit-hyphens:auto;hyphens:auto;line-height:1.5}ul.dir{margin:0 calc(var(--main-padh) * -1);list-style:none}ul.dir li{border-bottom:var(--rule)}ul.dir li:first-child{border-top:var(--rule)}ul.dir a{align-items:baseline;row-gap:var(--s-1);column-gap:var(--s-3);grid-template-columns:minmax(0,1fr) auto;display:grid}.proj-title,.proj-type{min-width:0}.proj-type,.proj-year{font-family:var(--mono);letter-spacing:var(--track-ui);color:var(--gray);text-transform:none;font-size:10px}.proj-type{text-align:left;grid-column:1/-1;line-height:1.25}.proj-year{text-align:right;min-width:3ch}ul.dir a:hover .proj-type,ul.dir a:hover .proj-year{color:var(--white)}body[data-route=project]{background:var(--bg)}body[data-route=project] main{grid-template-columns:var(--col) 1fr;background:0 0;gap:0;width:100%;max-width:none;padding:0;display:grid}.proj-side{background:var(--gray-light);padding:var(--main-padv) var(--main-padh);border-right:var(--rule);gap:var(--s-6);flex-direction:column;align-self:start;min-height:100vh;max-height:100vh;display:flex;position:sticky;top:0;overflow-y:auto}.proj-media{min-height:100vh;padding:var(--s-4);gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(360px,1fr));align-content:start;width:100%;max-width:960px;margin-inline:auto;display:grid}.proj-media>img,.proj-media>video,.proj-media>.media{width:100%;min-width:0;display:block}.proj-media>img,.proj-media>video{height:auto}.media--feature{grid-column:span 2}.media--full{grid-column:1/-1}.media iframe,.media video{border:0;width:100%;height:100%;display:block}.media--1x1{aspect-ratio:1}.media--16x9{aspect-ratio:16/9}.media--4x3{aspect-ratio:4/3}ul.links{margin:0 calc(var(--main-padh) * -1);list-style:none}ul.links li{border-bottom:var(--rule)}ul.links li:first-child{border-top:var(--rule)}.contact{margin-top:auto}.contact ul{margin:0 calc(var(--main-padh) * -1);list-style:none}.contact a,.contact .contact-email{font-size:var(--t-xs);padding:var(--s-1) var(--main-padh);letter-spacing:var(--track-wide);text-transform:uppercase;display:block}.contact .contact-email{font-family:var(--sans);color:var(--black);cursor:default;text-transform:none}@media (width<=720px){body{overflow-x:hidden}main{width:100%}body[data-route=project] main{grid-template-columns:1fr}.proj-side,.proj-media{min-height:auto}.proj-side{border-right:none;border-bottom:var(--rule);max-height:none;position:static;overflow-y:visible}.proj-media{grid-template-columns:1fr}.media--feature,.media--full{grid-column:auto}}#controls{z-index:10;width:260px;height:360px;padding:var(--main-padv) var(--main-padh);background:var(--gray-light);color:var(--black);border-top:var(--rule);border-left:var(--rule);font-family:var(--mono);font-size:var(--t-xs);box-sizing:border-box;flex-direction:column;line-height:1;display:flex;position:fixed;bottom:0;right:0}#controls .row.placeholder{display:none}#controls header{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--track-wide);text-transform:uppercase;border-bottom:var(--rule);margin:calc(var(--main-padv) * -1) calc(var(--main-padh) * -1) var(--s-2);padding:var(--s-2) var(--s-3)}#controls .row{padding:0 var(--s-3);align-items:center;gap:.4rem;margin-top:.5rem;display:flex}#controls label{letter-spacing:.04em;width:60px;color:var(--gray);flex-shrink:0;font-size:10px}#controls .val{text-align:right;width:28px;color:var(--black);flex-shrink:0;font-size:10px}#controls input[type=range]{appearance:none;background:var(--black);height:2px;accent-color:var(--black);outline:none;flex:1}#controls input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--black);cursor:pointer;border:none;width:10px;height:10px}#controls .btn-row{gap:var(--s-2);margin:auto var(--s-3) var(--main-padv);display:flex}#controls .btn-row button{background:var(--white);color:var(--black);border:var(--rule);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;flex:1;padding:.35rem;font-family:inherit;font-size:10px}#controls .btn-row button:hover{background:var(--black);color:var(--white)}.swatch{border:var(--rule);cursor:pointer;flex-shrink:0;width:16px;height:16px;padding:0}.swatch:hover{filter:invert()}#btnMode{width:auto;font-family:var(--mono);font-size:var(--t-xs);color:var(--black);cursor:pointer;text-transform:lowercase;background:0 0;border:none;margin:0;padding:0}#btnMode:hover{text-decoration:underline}@media (width<=720px){#controls{display:none}}