@font-face{font-family:diatype;src:url('/assets/diatype-rounded.woff2') format('woff2');font-weight:100 1000;font-display:swap}
@font-face{font-family:gramercy;src:url('/assets/gramercy-italic.woff2') format('woff2');font-weight:100 1000;font-display:swap}
@font-face{font-family:tx;src:url('/assets/tx-02.woff2') format('woff2');font-display:swap}
:root{--background:#dddcd6;--text:lab(17.3459 3.60325 -3.69945);--muted:#02051180;--secondary:#020510ab;--heading:#03050fc4;--quiet:#0205124e;--hover:#ff4500;--column:42rem;--gutter:16px;--deck-ease:cubic-bezier(.23,1,.32,1);--color-ease:cubic-bezier(.4,0,.2,1);color-scheme:light;view-transition-name:none}
*,*::before,*::after{box-sizing:border-box}
html{margin:0;min-height:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;touch-action:manipulation;scrollbar-gutter:stable}
body{margin:0;padding:var(--gutter);background:var(--background);color:var(--text);font-family:diatype,Arial,sans-serif;font-size:16px;line-height:1.4;font-synthesis:none;font-variation-settings:'wght' 475,'opsz' 30;font-feature-settings:'ss01' 1,'ss07' 1,'ss08' 1,'ss10' 1,'ss15' 1;font-variant-ligatures:common-ligatures contextual;font-optical-sizing:auto;letter-spacing:.0085em;word-spacing:-.04em;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;text-wrap:pretty;text-spacing-trim:space-first}
a{color:inherit;text-decoration:none;-webkit-user-drag:none}
button,a{-webkit-tap-highlight-color:transparent}
::selection{background:#02051224}
.app-container{width:100%}
nav{padding-top:16px;font-family:gramercy,Georgia,serif;font-variation-settings:'wght' 480,'opsz' 30;letter-spacing:-.006em}
nav ul{display:flex;justify-content:flex-end;gap:12px;list-style:none;padding:0;margin:0;text-transform:lowercase}
nav li{margin-inline:-8px}
nav a{display:inline-block;padding:0 8px;color:var(--quiet);transition:color 150ms var(--color-ease)}
nav a[aria-current=page]{color:#181818}
main{position:relative;max-width:var(--column);contain:inline-size;hyphens:auto;hyphenate-limit-chars:10 5 5;outline:none}
.page{padding-top:8px;padding-bottom:144px;view-transition-name:crossfade}
h1,h2,h3,p,figure,ul,ol{margin:0;font-size:inherit;font-weight:inherit}
h1,h2{font-variation-settings:'wght' 600,'opsz' 30;color:var(--heading);text-wrap:balance}
h1{margin-bottom:28px}
h2{margin-top:56px;margin-bottom:28px}
p{margin-top:28px}
.home-name{margin-top:16px;margin-bottom:16px}
.intro{margin-top:-.2em;padding-top:.2em}
.accent,blockquote{font-family:gramercy,Georgia,serif;font-variation-settings:'wght' 450,'opsz' 22;font-style:normal;letter-spacing:-.006em;line-height:1.25}
.link{color:#181818;transition:color 200ms}
.underline{text-decoration:underline;text-decoration-color:#0205122b;text-decoration-thickness:from-font;text-underline-offset:2px;text-decoration-skip-ink:auto}
.contact{position:fixed;bottom:16px;inset-inline:0;padding-inline:var(--gutter)}
.contact p{margin-top:0}
.contact .app-container{max-width:48rem}
.work-list{padding:0;margin-top:12px;list-style:none}
.leader-row{display:flex;align-items:center;justify-content:space-between;gap:4px;color:var(--muted)}
.row-title{font-variation-settings:'wght' 500,'opsz' 30}
.row-date{align-self:flex-start;font-variant-numeric:tabular-nums;letter-spacing:-.05em;white-space:nowrap}
.dot-leaders{flex:1;min-width:0;height:1em;overflow:hidden;overflow-wrap:break-word;text-align:end;font-size:14px;line-height:1;letter-spacing:6px}
.dot-leaders::after{content:'······································································'}
.row-date,.dot-leaders{transition:color 150ms var(--color-ease)}
.project h2{margin-top:40px;margin-bottom:12px}
.project:first-child h2{margin-top:56px}
.project p{margin-top:12px}
.project-title{color:var(--heading);text-decoration:underline;text-decoration-color:#0205122b;text-decoration-thickness:from-font;text-underline-offset:2px}
.back{display:inline-block;margin-bottom:28px}
.role,.tagline{margin-top:0;margin-bottom:28px}
.meta{color:var(--muted);font-size:14px}
.stack{margin-top:56px}
.colophon{margin-top:40px}
.pipeline{list-style:decimal;padding-left:20px;margin-top:28px}
.pipeline li{padding-left:6px;margin-top:28px}
.pipeline li::marker{color:#02051261}
.pipeline h3{font-variation-settings:'wght' 600,'opsz' 30}
.pipeline p{margin-top:0}
figure{margin-top:28px}
img{display:block;width:100%;height:auto;max-width:100%;background:transparent}
figcaption{margin-top:10px;color:var(--muted);font-size:14px}
pre,code{font-family:tx,monospace;font-size:14px;word-spacing:normal;letter-spacing:normal}
pre{overflow:auto;padding:14px 20px;line-height:1.6;background:#0205120a}
.table-wrap{overflow:auto;margin-top:28px}
table{border-collapse:collapse;width:100%;text-align:left}
th,td{padding:10px 12px 10px 0;border-bottom:1px solid #0205121a;vertical-align:top}
th{font-weight:inherit;font-variation-settings:'wght' 600,'opsz' 30}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.skip-link{position:fixed;left:16px;top:8px;padding:8px 12px;background:var(--background);z-index:100;transform:translateY(-200%)}
.skip-link:focus{transform:none}
@media(min-width:640px){:root{--gutter:24px}.page{padding-top:16px}}
@media(min-width:768px){:root{--gutter:32px}body{font-size:18px}nav{padding-top:24px}nav ul{justify-content:flex-start}.contact{bottom:24px}}
@media(min-width:1024px){nav{padding-top:32px}.page{padding-top:24px}.contact{bottom:32px}}
@media(hover:hover) and (pointer:fine){nav a:hover{color:var(--secondary)}nav a[aria-current=page]:hover{color:#181818}.link:hover{color:var(--hover)}.underline:hover,.project-title:hover{text-decoration-color:var(--secondary)}.leader-row:hover{color:var(--heading)}.leader-row:hover .row-date,.leader-row:hover .dot-leaders{transition:none}}
::view-transition-group(crossfade){animation-duration:450ms}
::view-transition-old(crossfade),::view-transition-new(crossfade){mix-blend-mode:normal}
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(crossfade){animation:hide 250ms cubic-bezier(.6,0,.8,1) forwards}
  ::view-transition-new(crossfade){opacity:0;animation:appear 350ms ease 100ms forwards}
}
@keyframes hide{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.99)}}
@keyframes appear{from{opacity:0;transform:scale(1.01)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){::view-transition-group(crossfade),::view-transition-old(crossfade),::view-transition-new(crossfade){animation:none!important}*{scroll-behavior:auto!important}.link,nav a,.row-date,.dot-leaders{transition:none}}

/* A document entrance only; client-side navigation keeps its own crossfade. */
html[data-entry="ready"] > body > .app-container{animation:page-enter 800ms var(--deck-ease) both}
@keyframes page-enter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){html[data-entry="ready"] > body > .app-container{animation-duration:180ms}}