@font-face{font-family:'Instrument Serif';src:url('assets/fonts/InstrumentSerif-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/IBMPlexMono-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:light;--paper:#fff;--ink:#342c27;--muted:#746a62;--arrow:#8a7f76;--active:#211b17}
*{box-sizing:border-box}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font-family:'IBM Plex Mono','Courier New',monospace;-webkit-font-smoothing:antialiased}
.studio{position:relative;overflow-x:clip;width:min(1680px,100%);min-height:100svh;margin-inline:auto;padding:64px clamp(32px,5vw,90px);display:grid;grid-template-columns:minmax(320px,.8fr) minmax(0,1.95fr);grid-template-rows:auto auto;column-gap:clamp(24px,3vw,64px);row-gap:48px;align-content:center}
.identity{grid-column:1;grid-row:1;align-self:end;z-index:1}
h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:88px;line-height:.88;letter-spacing:normal;margin:0 0 24px}
h1 span{display:block}
.role{font-size:14px;line-height:1.5;margin:0;color:var(--ink)}
.role-details{color:var(--muted);display:flex;flex-wrap:wrap;column-gap:.6em;max-width:340px}
.role-details>span{white-space:nowrap}
.project-name,.role{text-transform:uppercase}
.connections{position:relative;z-index:9;grid-column:1;grid-row:2;align-self:start}
.link-heading{font-size:12px;font-weight:400;line-height:1.5;color:var(--muted);text-transform:uppercase;margin:0 0 12px}
.next-note{font-size:12px;line-height:1.5;color:var(--muted);margin:12px 0 0}
.follow-links{margin-top:32px}
.projects{width:320px;max-width:100%;list-style:none;padding:0;margin:0;display:grid;gap:24px}
.project{display:grid;grid-template-columns:48px minmax(0,1fr) 16px;align-items:center;column-gap:16px;min-height:48px;width:100%;border-bottom:1px solid #746a621f;padding-bottom:20px;color:var(--ink);text-decoration:none;font-size:16px;line-height:1.5;transition:color 180ms ease}
li:first-child .project{border-top:1px solid #746a621f;padding-top:20px}
.project-art{display:flex;width:48px;height:48px;align-items:center;justify-content:center;transition:transform 180ms ease}
.project-art img{display:block;width:48px;height:48px;object-fit:contain}
.project-art img[src$='fluid.webp']{width:52px;height:52px;max-width:none}
.project-art img[src$='beans.webp']{width:54px;height:54px;max-width:none}
.project-name{white-space:nowrap}
.outbound{width:16px;height:16px;color:var(--arrow);transition:color 180ms ease}
.project:hover,.project:focus-visible{color:var(--active)}
.project:hover .outbound,.project:focus-visible .outbound{color:var(--active)}
.project:hover .project-art,.project:focus-visible .project-art{transform:translateY(-2px)}
a:focus-visible,button:focus-visible{outline:2px solid var(--active);outline-offset:6px;border-radius:2px}
.artwork{position:fixed;right:0;top:50%;transform:translateY(-50%);background:#fff;width:68%;margin:0;min-width:0}
.artwork-frame{position:relative;aspect-ratio:3/2}
.poster,.poster img{display:block;width:100%;height:100%;object-fit:contain}
.artwork video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.artwork.is-playing video,.artwork.has-frame video{opacity:1}
.motion-toggle{position:absolute;bottom:-20px;right:14px;display:flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--muted);font:11px 'IBM Plex Mono','Courier New',monospace;min-height:44px;padding:8px 12px;cursor:pointer}
[hidden]{display:none!important}
.pause-icon{display:none}
.is-playing .play-icon{display:none}
.is-playing .pause-icon{display:block}
@media(max-width:899px){.studio{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:32px 24px 40px;min-height:100svh}h1{font-size:56px}.identity,.connections{align-self:auto}.connections{margin-top:48px}.projects{gap:12px}.project{padding-block:10px}li:first-child .project{padding-top:10px}.artwork{right:-50%;bottom:0;top:auto;transform:none;width:100%;position:fixed}.motion-toggle{bottom:-20px;right:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}.project:hover .project-art,.project:focus-visible .project-art{transform:none}}