:root{--paper:#fbf9f5;--sheet:#f6f5f1;--ink:#1f1f1d;--muted:#63635e;--rule:#e2dfd8;--blue:#1551d6;--blue-hover:#0f43b8;--mag:#d1197f;--button-text:#fff;--shadow:rgba(31,31,29,.22);--ease:cubic-bezier(.2,.8,.2,1);color-scheme:light;font-family:'Source Sans 3',system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:16px}
:root[data-theme=dark]{--paper:#1b1a18;--sheet:#24231f;--ink:#f1ede4;--muted:#a39f96;--rule:#37352f;--blue:#8db1ff;--blue-hover:#b0c8ff;--mag:#ff72c6;--button-text:#1b1a18;--shadow:rgba(0,0,0,.65);color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}a{color:var(--blue);text-decoration:none}a:hover{color:var(--blue-hover)}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--blue);outline-offset:5px}p,h1,h2,h3{margin:0}p{text-wrap:pretty}h1,h2,h3{font-family:'Newsreader',Georgia,serif;font-weight:400}h2{font-size:2.75rem;line-height:1.05;letter-spacing:-.02em}img{display:block;max-width:100%}button{background:none;border:0}.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:5%}.eyebrow{font:400 .75rem/1.5 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.muted{color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link{position:fixed;z-index:20;top:10px;left:10px;padding:12px 20px;background:var(--paper);transform:translateY(-150%)}.skip-link:focus{transform:none}
.site-header{height:68px;padding:0 5%;border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1600px;margin:auto}.brand{display:flex;align-items:center;gap:10px;font:500 1.1875rem/1 'Newsreader',Georgia,serif;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}.brand-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:var(--ink);color:var(--paper);font:italic 500 18px/1 'Newsreader',Georgia,serif;padding-top:3px}.site-header nav{display:flex;gap:28px;font-size:.9375rem;font-weight:500}.site-header nav a{color:var(--ink);padding-block:12px;position:relative}.site-header nav a:hover{color:var(--blue)}.site-header nav a:after{content:'';height:1px;background:var(--blue);position:absolute;bottom:7px;left:0;right:0;transform:scaleX(0);transform-origin:left;transition:transform .25s}.site-header nav a:hover:after{transform:scaleX(1)}.theme-control{display:flex;align-items:center;gap:10px;border:0;padding:0;margin:0}.theme-control legend{float:left;font:400 .75rem/1 'DM Mono',monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-right:10px}.theme-options{display:flex;padding:2px;border:1px solid var(--rule);border-radius:999px;background:var(--sheet)}.theme-options label{position:relative;cursor:pointer}.theme-options input{position:absolute;opacity:0;width:1px;height:1px}.theme-options span{display:block;padding:9px 12px;border-radius:99px;font:500 .75rem/1 'DM Mono',monospace;color:var(--muted);transition:background .2s,color .2s}.theme-options input:checked+span{background:var(--ink);color:var(--paper)}.theme-options input:focus-visible+span{outline:2px solid var(--blue);outline-offset:4px}
.hero{display:grid;grid-template-columns:5fr 7fr;gap:32px;align-items:start;padding-block:56px 72px}.hero-copy{display:flex;flex-direction:column;gap:22px;padding-top:10px}.hero-copy .eyebrow{max-width:470px}.hero h1{font-size:5.25rem;line-height:.98;letter-spacing:-.025em}.hero-lead{margin-top:10px;font-size:1.625rem;line-height:1.3;max-width:420px}.hero-support{font-size:1rem;line-height:1.55;color:var(--muted);max-width:400px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border-radius:8px;font-size:.9375rem;font-weight:600;transition:transform .2s,background .2s,color .2s}.button:hover{transform:translateY(-2px)}.primary{background:var(--blue);color:var(--button-text)}.primary:hover{background:var(--blue-hover);color:var(--button-text)}.secondary{border:1px solid var(--ink);color:var(--ink)}.secondary:hover{background:var(--ink);color:var(--paper)}
.stage-heading{margin:2px 12px 10px}.project-stage{min-width:0;background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:14px 16px 20px}.project-tabs{display:flex;gap:4px;border-bottom:1px solid var(--rule)}.project-tabs button{padding:8px 12px 10px;min-height:44px;font-size:.9375rem;color:var(--muted);white-space:nowrap;transition:color .2s,box-shadow .2s}.project-tabs button[aria-selected=true]{font-weight:600;color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}.project-tabs button:hover{color:var(--blue)}.stage-description{display:flex;align-items:center;gap:16px;padding-top:14px;}.stage-description p{font-size:.9375rem;line-height:1.45;flex:1}
.stage-viewport{perspective:1600px;perspective-origin:60% 40%;padding:22px 4px 24px;--lift:56px;--tilt:rotateX(10deg) rotateY(-16deg)}.screen-stack{position:relative;aspect-ratio:1140/800;transform-style:preserve-3d;transform:var(--tilt);transition:transform .7s var(--ease)}.screen-plane{position:absolute;inset:0;overflow:hidden;border:1px solid var(--rule);border-radius:6px;background:#fff;box-shadow:0 35px 65px -28px var(--shadow),0 2px 6px var(--shadow)}.stage-image{position:absolute;width:100%;height:100%;inset:0;object-fit:contain;opacity:0;transition:opacity .45s ease}.stage-image.is-active{opacity:1}.annotation-plane{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}.marker-plane{position:absolute;inset:0;transform:translateZ(var(--lift));transition:transform .7s var(--ease);pointer-events:none}.target-ring{position:absolute;width:12px;height:12px;margin:-6px;border:1.5px solid var(--mag);border-radius:50%;animation:fade .3s both;animation-delay:var(--d0)}.annotation-leader{position:absolute;height:1px;transform-origin:0 50%}.annotation-leader i{display:block;height:1px;background:var(--mag);transform-origin:0 50%;animation:draw .35s ease-out both;animation-delay:var(--d1)}.annotation-post{position:absolute;width:1px;height:var(--lift);background:var(--mag);transform-origin:50% 100%;transform:translate(-50%,-100%) rotateX(-90deg);transition:height .7s var(--ease);animation:fade .3s both;animation-delay:var(--d2)}.marker-position{position:absolute;transform:translate(-50%,-50%);pointer-events:auto}.annotation-marker{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:7px;background:var(--mag);color:var(--paper);font:500 .75rem/1 'DM Mono',monospace;box-shadow:0 10px 24px -8px var(--mag);animation:pop .45s var(--ease) both;animation-delay:var(--d2);transition:scale .2s,background .2s}.annotation-marker.is-hot{scale:1.25;background:var(--ink)}.stage-notes{list-style:none;margin:4px 0 16px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;min-height:84px}.note-button{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:0;font-size:.875rem;line-height:1.45;width:100%}.note-number{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:5px;background:var(--mag);color:var(--paper);font:500 .75rem/1 'DM Mono',monospace;transition:background .2s}.note-button.is-hot .note-number{background:var(--ink)}.text-link{display:inline-block;align-self:flex-start;color:var(--blue);font-size:.9375rem;font-weight:600;line-height:1.35;border-bottom:1px solid currentColor;padding-bottom:1px}.stage-link{margin-top:2px}.stage-viewport:focus-within{--tilt:rotateX(0deg) rotateY(0deg);--lift:0px}
.project-stage:focus-within .stage-viewport{--tilt:rotateX(0deg) rotateY(0deg);--lift:0px}
@media(hover:hover){.project-stage:hover .stage-viewport{--tilt:rotateX(0deg) rotateY(0deg);--lift:0px}.experience-item:hover h3{color:var(--blue)}.filter-options label:hover input:not(:checked)+span{border-color:var(--muted)}}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding-bottom:20px;border-bottom:1px solid var(--rule)}.section-head h2{flex:none}.project-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 32px;padding-top:40px}.project-card{min-width:0;grid-column:span 6;display:flex;flex-direction:column;gap:12px;transition:opacity .25s,filter .25s}.card-image{position:relative;display:block;aspect-ratio:1180/820;border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -40px var(--shadow);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}.card-image img{width:100%;height:100%;object-fit:cover}.card-preview{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}.card-preview.is-playing{opacity:1}.card-image:hover,.card-image:focus-visible{transform:translateY(-8px);box-shadow:0 34px 60px -30px var(--shadow)}.card-copy{display:flex;flex-direction:column;align-items:flex-start;gap:12px;flex:1}.card-meta{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap;width:100%}.card-tags{font:.75rem/1.5 'DM Mono',monospace;letter-spacing:.01em;color:var(--muted)}.project-card h3{font-size:1.5rem;line-height:1.1;letter-spacing:-.01em}.project-card p{font-size:1rem;line-height:1.5}.project-card .text-link{margin-top:auto}
.method{margin-block:56px 64px}.method-inner{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:40px 40px 44px}.method h2{font-size:2.25rem;margin-top:10px}.method-steps{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}.method-steps li{display:flex;flex-direction:column;align-items:flex-start;gap:10px;border-top:1px solid var(--rule);padding-top:16px}.step-title{display:flex;gap:10px;align-items:baseline}.step-title>span{display:block;font:400 1.75rem/1 'Newsreader',Georgia,serif;transform-origin:left center;transition:transform .5s var(--ease),color .3s}.method-steps li:hover .step-title>span,.method-steps li:focus-within .step-title>span{transform:scaleX(1.28);color:var(--mag)}.step-title h3{font:600 1.125rem/1.2 'Source Sans 3',sans-serif}.method-steps p{font-size:1rem;line-height:1.5}.method-steps .text-link{margin-top:auto}.about{display:grid;grid-template-columns:5fr 7fr;gap:32px;padding-block:16px 72px}.about h2{margin-top:14px}.about-copy{display:flex;flex-direction:column;gap:18px;font-size:1.125rem;line-height:1.6;max-width:640px}.experience{padding-bottom:72px}.experience-list{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}.experience-item{position:relative;padding:24px 0;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:8px}.experience-item h3{font-size:1.5rem;transition:color .2s}.experience-item[hidden]{display:none}.experience-item p{line-height:1.5}.experience-item .eyebrow{font-size:.75rem}.experience-filter{border:0;margin:0;padding:24px 0 8px;min-width:0}.filter-options{display:flex;flex-wrap:wrap;gap:8px}.filter-options label{position:relative;cursor:pointer}.filter-options input{position:absolute;opacity:0;width:1px;height:1px}.filter-options label>span{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--rule);border-radius:999px;font-size:.9375rem;font-weight:600;transition:background .2s,color .2s,border-color .2s}.filter-count{font:400 .75rem/1 'DM Mono',monospace;color:var(--muted)}.filter-options input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}.filter-options input:checked+span .filter-count{color:inherit;opacity:.75}.filter-options input:focus-visible+span{outline:2px solid var(--blue);outline-offset:4px}.role-link{margin-top:auto}.role-link::after{content:'';position:absolute;inset:0;border-radius:4px}.role-link:focus-visible{outline:0}.role-link:focus-visible::after{outline:2px solid var(--blue);outline-offset:6px}.contact-inner{padding:48px 0;border-block:1px solid var(--rule)}.contact h2{margin-top:14px}.contact p:not(.eyebrow){margin-top:18px;font-size:1.125rem;line-height:1.5}.contact .actions{margin-top:24px}.site-footer{display:flex;justify-content:space-between;gap:24px;align-items:center;padding-block:28px 36px;font-size:.875rem;color:var(--muted)}.site-footer div{display:flex;gap:20px}
dialog{width:min(1040px,calc(100% - 40px));max-height:88dvh;overscroll-behavior:contain;border:1px solid var(--rule);border-radius:12px;padding:48px;background:var(--paper);color:var(--ink);box-shadow:0 40px 120px #0005}dialog::backdrop{background:#14141499;backdrop-filter:blur(6px)}dialog[open]{animation:dialog-in .3s var(--ease)}body:has(dialog[open]){overflow:hidden}.dialog-close{position:absolute;right:20px;top:12px;display:flex;gap:10px;align-items:center;min-height:44px;font-size:.875rem}.dialog-close span{font-size:1.5rem}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:24px 0 14px}.dialog-heading h2{font-size:3rem}.dialog-intro{font-size:1.25rem;line-height:1.5;margin-bottom:22px;max-width:46rem}.dialog-image{width:100%;border:1px solid var(--rule);border-radius:6px;margin-block:24px}.dialog-facts{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px 0;border-block:1px solid var(--rule);line-height:1.5}.dialog-facts dt{font:.75rem 'DM Mono',monospace;text-transform:uppercase;color:var(--muted);margin-bottom:6px}.dialog-facts dd{margin:0}.case-copy{max-width:68ch}.case-copy h3{font-size:1.75rem;margin:30px 0 10px}.case-copy p,.case-copy li{font-size:1.0625rem;line-height:1.65}.case-copy p+p{margin-top:14px}.case-copy ul{margin:10px 0 0;padding-left:1.25em}.case-copy li+li{margin-top:6px}.case-copy h4{margin:0;font:600 1.125rem/1.35 'Source Sans 3',system-ui,sans-serif}.role-entry{margin-top:20px}.role-entry+.role-entry{padding-top:20px;border-top:1px solid var(--rule)}.case-copy .role-entry-meta{margin-top:4px;font:.75rem/1.5 'DM Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.dialog-facts>div:last-child:nth-child(odd){grid-column:1/-1}.dialog-heading.role-heading h2{font-size:clamp(2rem,1.5rem + 1.6vw,2.5rem);line-height:1.1}.dialog-links{display:flex;gap:20px;margin-top:30px}
.walkthrough{margin:4px 0 30px}.walkthrough [hidden]{display:none!important}.walkthrough-stage{position:relative;aspect-ratio:var(--ar);width:min(100%,calc(var(--stage-h,max(240px,88dvh - 340px)) * var(--ar)));margin-inline:auto;overflow:hidden;border:1px solid var(--rule);border-radius:8px;background:var(--sheet);box-shadow:0 30px 60px -40px var(--shadow)}.walkthrough-video,.walkthrough-still{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}.walkthrough-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px 18px;align-items:start;margin-top:14px}.walkthrough-play,.walkthrough-full{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 14px 0 12px;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink);font:500 .75rem/1 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;transition:border-color .2s,color .2s}.walkthrough-full{padding:0}.walkthrough-play svg{width:14px;height:14px;fill:currentColor}.walkthrough-full svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}.walkthrough-play:hover,.walkthrough-full:hover{border-color:var(--ink);color:var(--ink)}.walkthrough-play:disabled{opacity:.45;cursor:default}.walkthrough-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:16px}.walkthrough-step{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;width:100%;min-height:44px;padding:0 0 4px;text-align:left}.walkthrough-track{grid-column:1/-1;display:block;height:3px;margin-top:2px;border-radius:2px;background:var(--rule);overflow:hidden}.walkthrough-track i{display:block;height:100%;background:var(--mag);transform-origin:0 50%;transform:scaleX(var(--p,0))}.walkthrough-step .note-number{transition:background .2s,color .2s,box-shadow .2s}.walkthrough-step:not([aria-current]) .note-number{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--rule)}.walkthrough-caption{font-size:.875rem;line-height:1.45;color:var(--muted);transition:color .2s}.walkthrough-step[aria-current=step] .walkthrough-caption{color:var(--ink)}.walkthrough-step:hover .walkthrough-caption{color:var(--blue)}.walkthrough-status:not(:empty){margin-top:12px;font-size:.9375rem;color:var(--muted)}.walkthrough:fullscreen{display:flex;flex-direction:column;justify-content:center;margin:0;padding:28px 36px;background:var(--paper);color:var(--ink)}.walkthrough:fullscreen .walkthrough-stage{width:min(100%,calc((100dvh - 200px) * var(--ar)))}
@media(max-height:820px) and (min-width:581px){dialog{padding-top:36px}.dialog-heading{margin:14px 0 10px}.dialog-heading h2{font-size:2.5rem}.dialog-intro{font-size:1.125rem;margin-bottom:16px}.walkthrough-stage{width:min(100%,calc(var(--stage-h,max(240px,88dvh - 280px)) * var(--ar)))}}
@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}@keyframes dialog-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media(min-width:1500px){.hero{padding-top:72px}.hero h1{font-size:6rem}}
@media(max-width:1180px){.theme-control legend{display:none}.site-header{gap:16px}.site-header nav{gap:20px}.hero{grid-template-columns:5fr 7fr;gap:24px}.hero-copy .eyebrow{max-width:350px;line-height:1.8}.project-tabs button{padding-inline:8px;font-size:.875rem}.stage-description{align-items:flex-start;flex-direction:column;gap:10px}.section-head{align-items:flex-start}.stage-notes{min-height:110px}.method-inner{padding:32px}.method-steps{gap:24px}}
@media(max-width:900px){.site-header{height:auto;min-height:106px;flex-wrap:wrap;padding-block:14px;gap:12px}.site-header nav{order:3;flex-basis:100%;justify-content:center;gap:32px}.site-header nav a{padding:6px 0}.site-header nav a:after{bottom:1px}.hero{grid-template-columns:1fr;padding-top:40px;gap:36px}.hero-copy{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}.hero-copy .eyebrow{grid-column:1/-1;max-width:none}.hero h1{grid-row:2/5;font-size:5rem}.hero-lead{font-size:1.5rem;margin-top:0}.hero-support{font-size:1rem}.project-stage{width:100%}.project-tabs button{flex:1}.stage-description{flex-direction:row;align-items:center;}.stage-viewport{max-width:690px;margin-inline:auto;padding:26px 12px 30px}.stage-notes{min-height:0}.section-head{flex-direction:column;gap:20px}.project-grid{gap:36px 24px}.method-steps{grid-template-columns:1fr 1fr;gap:32px}.about{grid-template-columns:1fr 1.3fr}.site-footer{flex-wrap:wrap}.site-footer>p:first-child{flex-basis:100%}}
@media(max-width:580px){.wrap{padding-inline:22px}.site-header{padding-inline:22px}.brand{font-size:1.0625rem;gap:8px}.brand-mark{width:25px;height:25px}.theme-options span{font-size:.75rem;padding:9px 8px}.site-header nav{justify-content:space-between;gap:12px}.hero{padding-top:30px;padding-bottom:48px}.hero-copy{display:flex;gap:18px}.hero-copy .eyebrow{font-size:.75rem;line-height:1.8;max-width:310px}.hero h1{font-size:4.5rem}.hero-lead{font-size:1.5rem;max-width:350px;margin-top:4px}.hero-support{max-width:350px}.hero .actions{margin-top:2px}.project-stage{padding:10px 12px 16px}.project-tabs{gap:0;flex-wrap:wrap}.project-tabs button{font-size:.875rem;flex-basis:50%;padding:8px 6px}.stage-description{flex-direction:column;align-items:flex-start;gap:10px;}.stage-viewport{--lift:32px;padding:20px 0 22px;perspective:1100px}.annotation-marker{width:26px;height:26px}.stage-notes{grid-template-columns:1fr;gap:12px}.note-button{font-size:.9375rem}.stage-link{margin-top:4px}.section-head h2{font-size:2.375rem}.project-grid{grid-template-columns:1fr;padding-top:28px;gap:36px}.project-card{grid-column:1;display:flex;gap:14px}.project-card h3{font-size:1.875rem}.card-meta{gap:8px}.method{margin-block:42px}.method-inner{padding:26px 22px}.method h2{font-size:2rem;line-height:1.15}.method-steps{grid-template-columns:1fr;gap:28px}.about{grid-template-columns:1fr;gap:24px;padding-block:12px 48px}.about h2{font-size:2.375rem}.experience{padding-bottom:48px}.experience-list{grid-template-columns:1fr}.contact-inner{padding-block:32px}.contact h2{font-size:2.375rem}.site-footer{gap:18px}.site-footer div{gap:24px}dialog{padding:42px 22px 26px;width:calc(100% - 24px);max-height:92dvh}.dialog-heading{flex-wrap:wrap;gap:12px}.dialog-heading h2{font-size:2.375rem}.dialog-facts{grid-template-columns:1fr}.walkthrough-bar{grid-template-columns:1fr auto;gap:12px}.walkthrough-play{justify-self:start}.walkthrough-steps{grid-column:1/-1;grid-row:2;grid-template-columns:1fr;gap:8px}.walkthrough-step{grid-template-columns:auto 1fr}.walkthrough:fullscreen{padding:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.stage-viewport{--tilt:none!important;--lift:0px!important}.card-image:hover,.button:hover,.method-steps li:hover .step-title>span{transform:none}.annotation-marker.is-hot{scale:1}.card-preview{display:none}}