*{box-sizing:border-box}html{scroll-behavior:smooth}body.portfolio-page{--page:#fff;--secondary:#f4f4f4;--hover:#ededed;--text:#202020;--muted:#777;--faint:#aaa;--stroke:#ececec;--sidebar-width:252px;margin:0;background:var(--page);color:var(--text);font-family:'Inter Variable',Inter,system-ui,sans-serif;font-size:13px;line-height:1.45}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #658bd6;outline-offset:4px}button{color:inherit}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.skip-link{position:fixed;top:-50px;left:20px;z-index:10;padding:10px 16px;background:var(--text);color:var(--page);border-radius:8px}.skip-link:focus{top:10px}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);padding:18px 16px;display:flex;flex-direction:column;gap:30px}.brand-row{display:flex;justify-content:space-between;align-items:center;height:32px}.brand{display:block;line-height:1}.brand-mark{font-size:44px;line-height:30px;letter-spacing:-5px;font-weight:750}.brand-mark>span{font-size:29px;margin-left:5px}.edition{border:1px solid var(--stroke);border-radius:99px;padding:4px 8px;font-size:10px;color:var(--muted)}.eyebrow{font-size:12px;color:var(--faint);margin:0 0 6px}.side-link{display:flex;width:100%;align-items:center;gap:6px;justify-content:space-between;padding:5px 0;text-align:left;border:0;background:none;color:var(--muted);font-size:13px}.side-link.active{justify-content:flex-start;color:var(--text)}.active-dot{height:6px;width:6px;border-radius:100%;background:var(--text);margin-left:1px}.side-link:hover{color:var(--text)}.side-link>span:not(.active-dot){font-size:11px;color:var(--faint)}.sidebar-feature{margin-top:10px;display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--stroke);border-radius:9px}.feature-icon{background:var(--secondary);height:30px;width:30px;border-radius:6px;display:grid;place-items:center;font-size:21px}.sidebar-feature strong{display:block;font-size:12px;font-weight:500}.sidebar-feature small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.sidebar-bottom{margin-top:auto;color:var(--muted);font-size:12px}.tiny-rule{width:30px;border-top:1px solid var(--stroke);margin-bottom:16px}.sidebar-bottom p{margin:0 0 24px}.bottom-line{display:flex;justify-content:space-between;font-size:10px;color:var(--faint)}.system-indicator{display:flex;align-items:center;gap:4px}.system-indicator>span{width:6px;height:6px;border:1px solid currentColor;border-radius:100%}.workspace{margin-left:var(--sidebar-width);padding:16px 16px 0}.workspace-header{min-height:32px;display:flex;align-items:center;justify-content:space-between;gap:16px}.page-intro{display:flex;align-items:baseline;gap:9px}.page-intro h1{font-size:16px;font-weight:550;margin:0;letter-spacing:-.3px}.page-intro p{margin:0;color:var(--muted);font-size:12px}.header-actions{display:flex;align-items:center;gap:8px}.search-control{display:flex;align-items:center;gap:7px;padding:5px 8px;background:var(--secondary);border-radius:7px}.search-control>svg,.icon-button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}.search-control>svg{color:var(--muted)}.search-control input{border:0;background:none;color:var(--text);font-size:11px;width:105px;outline-offset:5px}.search-control input::placeholder{color:var(--muted)}kbd{font-family:inherit;font-size:9px;color:var(--faint);white-space:nowrap}.icon-button{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--stroke);border-radius:7px;background:var(--page)}.icon-button:hover{background:var(--secondary)}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0}.filters{display:flex;gap:7px;flex-wrap:wrap}.filters button{border:0;background:var(--secondary);padding:5px 12px;border-radius:99px;font-size:12px;line-height:18px;color:var(--muted)}.filters button:hover{background:var(--hover);color:var(--text)}.filters button[aria-pressed=true]{background:var(--text);color:var(--page)}.sort-label select{border:1px solid var(--stroke);border-radius:99px;padding:4px 9px;color:var(--text);background:var(--page);font-size:11px}.work-grid{columns:4;column-gap:12px}.work-grid[data-large=true]{columns:3}.work-card{break-inside:avoid;margin:0 0 12px;display:block;width:100%;padding:0;border:1px solid var(--stroke);border-radius:9px;overflow:hidden;background:var(--secondary);text-align:left;position:relative;isolation:isolate}.work-card .artwork{aspect-ratio:var(--ratio);display:block;overflow:hidden;background:var(--card-bg,#e2e9f0);position:relative}.work-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}.work-card:hover img{transform:scale(1.035)}.work-card img.contain{object-fit:contain;padding:20px}.work-card .mobile-image{width:72%;height:auto;margin:12% auto;border-radius:20px;box-shadow:0 12px 38px #0005}.work-card .card-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:12px;gap:8px;justify-content:space-between;background:linear-gradient(transparent 50%,#0007);color:white}.card-label{display:flex;align-items:center;gap:7px}.project-mark{width:25px;height:25px;display:grid;place-items:center;font-size:10px;background:white;color:#171717;border:1px solid #fff6;border-radius:100%;font-weight:600}.card-label strong{display:block;font-size:11px;font-weight:500}.card-label small{display:block;font-size:9px;opacity:.8}.card-arrow{display:grid;place-items:center;width:25px;height:25px;background:#ffffff25;backdrop-filter:blur(6px);border:1px solid #ffffff30;border-radius:100%}.card-arrow svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5}.category-badge{position:absolute;top:10px;right:10px;font-size:9px;line-height:1;padding:6px 7px;color:white;background:#0004;backdrop-filter:blur(8px);border-radius:99px}.portfolio-footer{margin-top:30px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:10px;color:var(--muted);border-top:1px solid var(--stroke);padding:16px 0 24px}.portfolio-footer p{margin:0}.portfolio-footer#site-footer{background:transparent}.empty-state{text-align:center;padding:80px 10px}.empty-state h2{font-size:20px;font-weight:500}.empty-state p{color:var(--muted)}.empty-state button{border:1px solid var(--stroke);border-radius:99px;padding:8px 14px;background:var(--secondary)}dialog{color:var(--text);background:var(--page);border:1px solid var(--stroke);padding:0;border-radius:14px;box-shadow:0 30px 100px #0004;max-height:92dvh}dialog::backdrop{background:#0009;backdrop-filter:blur(6px)}.project-dialog{width:min(1000px,calc(100vw - 32px))}.dialog-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:12px;color:var(--muted)}.dialog-preview{background:var(--secondary);max-height:62dvh;overflow:auto;display:flex;justify-content:center}.dialog-preview img{max-width:100%;object-fit:contain;max-height:62dvh}.dialog-copy{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:24px}.dialog-copy h2{font-size:23px;letter-spacing:-.6px;margin:4px 0 8px;font-weight:550}.dialog-copy p:last-child{max-width:580px;margin:0;color:var(--muted);font-size:13px}.live-link{white-space:nowrap;display:inline-flex;align-items:center;gap:20px;background:var(--text);color:var(--page);padding:9px 14px;border-radius:7px;font-size:12px}.about-dialog{width:min(480px,calc(100vw - 32px));padding:32px}.about-dialog>.close-dialog{position:absolute;top:12px;right:12px}.about-dialog h2{font-size:30px;line-height:1.1;letter-spacing:-1px;margin:24px 0}.about-dialog>p:not(.eyebrow){font-size:14px;line-height:1.7;color:var(--muted)}.about-dialog .live-link{margin-top:16px}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}
@media(prefers-color-scheme:dark){body.portfolio-page{--page:#18191a;--secondary:#242526;--hover:#303132;--text:#e4e6eb;--muted:#b0b3b8;--faint:#93979e;--stroke:#333536}.work-card{border-color:#3a3b3c}.work-card img{color-scheme:light}.project-mark{background:#e4e6eb}.portfolio-footer#site-footer{background:transparent}}
@media(min-width:1800px){.work-grid{columns:5}.work-grid[data-large=true]{columns:4}}@media(max-width:1200px){body.portfolio-page{--sidebar-width:216px}.work-grid{columns:3}.work-grid[data-large=true]{columns:2}.page-intro p{display:none}.edition{font-size:9px;padding:4px 6px}}@media(max-width:900px){.work-grid{columns:2}.work-grid[data-large=true]{columns:1}.search-control kbd{display:none}.portfolio-footer{flex-wrap:wrap}.portfolio-footer p:nth-child(2){display:none}}@media(max-width:680px){.sidebar{position:relative;width:auto;padding:16px;gap:0;flex-direction:row;justify-content:space-between;align-items:center;border-bottom:1px solid var(--stroke)}.brand-row{gap:16px}.brand-mark{font-size:38px}.side-nav{display:flex;gap:16px;align-items:center}.side-nav .eyebrow,.side-nav .active-dot,.side-nav button>span,.side-nav button{display:none}.side-nav .side-link{font-size:12px}.collections,.sidebar-feature,.sidebar-bottom{display:none}.workspace{margin-left:0;padding:16px}.workspace-header{align-items:flex-start}.page-intro{padding-top:4px}.page-intro h1{font-size:16px}.search-control input{width:100px}.toolbar{margin-top:16px;gap:8px}.filters{gap:5px}.filters button{font-size:11px;padding:4px 9px}.sort-label select{padding:4px 6px;font-size:10px}.work-grid,.work-grid[data-large=true]{columns:2;column-gap:10px}.work-card{margin-bottom:10px}.card-label strong{font-size:10px}.card-label small{display:none}.project-mark{width:20px;height:20px;font-size:8px}.work-card .card-overlay{padding:8px}.card-arrow{width:20px;height:20px}.category-badge{font-size:8px;top:8px;right:8px}.dialog-copy{padding:18px;flex-direction:column;align-items:flex-start;gap:18px}.dialog-copy h2{font-size:21px}.work-card img.contain{padding:10px}.portfolio-footer{font-size:9px}.edition{font-size:9px}}@media(max-width:380px){.search-control input{width:75px}.filters button{padding:4px 7px}.filters{gap:3px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.work-card img{transition:none}}

html { color-scheme: light dark; background: #fff; } body.portfolio-page { min-height:100dvh; font-family:Inter,system-ui,sans-serif; } .brand { display:flex; align-items:center; gap:9px; } .profile-avatar { width:29px; height:29px; border-radius:50%; object-fit:cover; } .profile-name { font-size:13px; letter-spacing:-.25px; font-weight:600; } .work-card video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .2s; } .work-card.preview-playing video { opacity:1; } .dialog-preview video { max-width:100%; max-height:62dvh; } .dialog-preview [hidden] { display:none; } @media(prefers-color-scheme:dark){html { background:#18191a; }} @media(max-width:680px){ .brand-row {gap:12px;} .sidebar .side-nav {gap:9px;} }

/* Balanced masonry retains reading order and gives each project room to breathe. */
.work-grid,.work-grid[data-large=true]{display:grid;columns:unset;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:4px;gap:14px;align-items:stretch}
.work-grid[data-large=true]{grid-template-columns:repeat(3,minmax(0,1fr))}
.work-card{margin:0;min-width:0;border-radius:10px;transition:box-shadow .2s,border-color .2s}
.work-card:hover,.work-card:focus-visible{border-color:color-mix(in srgb,var(--text) 30%,transparent);box-shadow:0 4px 16px #0000000b}
.work-card .artwork{height:100%;aspect-ratio:auto}
.work-card .card-overlay{padding:12px;background:linear-gradient(transparent calc(100% - 76px),#0009);align-items:flex-end;justify-content:flex-end}
.card-label{min-width:0;gap:8px}
.card-label>span:last-child{min-width:0}
.card-label strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:500;text-shadow:0 1px 5px #0003}
.card-label small{display:none}
.project-mark{width:23px;height:23px;min-width:23px;font-size:8px;box-shadow:0 1px 6px #0001}
.card-arrow{width:24px;height:24px;min-width:24px;background:#00000020}
.work-card[data-presentation=inset] img,.work-card[data-presentation=inset] video{object-fit:contain;padding:18px}
.work-card video{object-position:center}
.work-card:hover img{transform:scale(1.015)}
.work-card.preview-playing img{transform:none}
.portfolio-footer{margin-top:24px}
.icon-button:disabled{opacity:.45;cursor:default}
#motion-toggle .play-symbol{display:none}
#motion-toggle[data-paused=true] .play-symbol{display:block}
#motion-toggle[data-paused=true] .pause-symbol{display:none}
@media(min-width:1800px){.work-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.work-grid[data-large=true]{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1200px){.work-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.work-grid[data-large=true]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.work-grid[data-large=true]{grid-template-columns:minmax(0,1fr)}}
@media(max-width:680px){.work-grid{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}.work-grid[data-large=true]{grid-template-columns:minmax(0,1fr)}.work-card .card-overlay{padding:9px;background:linear-gradient(transparent calc(100% - 56px),#0009)}.project-mark{display:none}.card-label strong{font-size:10px}.card-arrow{min-width:20px;width:20px;height:20px}.work-card[data-presentation=inset] img,.work-card[data-presentation=inset] video{padding:10px}.header-actions{gap:6px}.search-control input{width:88px}}
@media(prefers-reduced-motion:reduce){.work-card,.work-card video{transition:none}}

/* Full-width work with a floating navigation dock. */
.workspace{max-width:1480px;margin:0 auto;padding:28px 32px calc(110px + env(safe-area-inset-bottom,0px))}
.workspace-header{display:block;min-height:32px;margin-bottom:24px;padding:0;border:0}
.page-intro h1{font-size:16px;font-weight:550}
@media(max-width:680px){.workspace{padding:20px 20px calc(100px + env(safe-area-inset-bottom,0px))}.workspace-header{margin-bottom:20px;padding:0}.workspace-header .work-tabs{margin:0}}

/* Let the actual media dimensions determine the masonry height. */
.work-grid,.work-grid[data-large=true]{grid-auto-rows:1px;row-gap:0}
.work-card{margin:0 0 14px;min-height:0;height:max-content;align-self:start;border:0}
.work-card .artwork{height:auto;aspect-ratio:var(--ratio)}
.work-card .artwork>img,.work-card .artwork>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:0;transform:none}
@media(max-width:680px){.work-grid,.work-grid[data-large=true]{row-gap:0}.work-card{margin-bottom:10px}}

/* Give the close-up logic recording a quiet frame around the media. */
.work-card[data-presentation=framed] .artwork{background:#101214}
.work-card[data-presentation=framed] .artwork>img,.work-card[data-presentation=framed] .artwork>video{position:absolute;inset:5%;width:90%;height:90%;object-fit:contain;border-radius:6px}
.dialog-preview[data-presentation=framed]{padding:24px;background:#101214}
.dialog-preview[data-presentation=framed] video{max-height:calc(62dvh - 48px);border-radius:6px}

.work-tabs{display:flex;gap:20px;align-items:center}
.work-tabs [role=tab]{padding:8px 0;border:0;border-bottom:1px solid transparent;background:none;color:var(--muted);font-size:14px;font-weight:500;white-space:nowrap}
.work-tabs [aria-selected=true]{color:var(--text);border-bottom-color:var(--text)}
.case-study-caption{display:block;padding:12px;font-size:13px;font-weight:500}
.work-grid[data-collection=case-studies]{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:auto;gap:48px 28px;align-items:start}
.work-grid[data-collection=case-studies] .work-card{margin:0;grid-row-end:auto;border:0;border-radius:0;background:transparent;overflow:visible;text-align:left}
.work-grid[data-collection=case-studies] .work-card:hover,.work-grid[data-collection=case-studies] .work-card:focus-visible{box-shadow:none}
.work-grid[data-collection=case-studies] .artwork{aspect-ratio:4/3;background:var(--card-bg);border-radius:5px;overflow:hidden}
.work-grid[data-collection=case-studies] .artwork>img,.work-grid[data-collection=case-studies] .artwork>video{object-fit:contain}
.work-grid[data-collection=case-studies] .case-study-caption{position:relative;text-align:left;padding:20px 0 0;line-height:1.5}
.case-study-category{display:block;font:10px/1.5 var(--font-mono,monospace);color:var(--muted);margin-bottom:12px;letter-spacing:.02em}
.case-study-caption strong{display:block;font-family:var(--font-sans,system-ui);font-size:25px;font-weight:500;letter-spacing:-.025em}
.case-study-summary{display:block;margin-top:5px;color:var(--muted);font-size:15px;font-weight:400;line-height:1.6}
.case-study-description{display:none}
.case-study-action{display:flex;align-items:center;gap:16px;font-size:12px;margin-top:20px;font-weight:500}
.case-study-arrow{position:static;display:inline-block;font-size:18px;font-weight:400}

/* Present Brunchclub as two upright phones on a landscape canvas. */
.work-card[data-presentation=phone] .artwork{background:radial-gradient(ellipse at 30% 20%,#faf5ee 0,transparent 65%),linear-gradient(135deg,#eee7df,#e0d1c4);container-type:size}
.phone-pair{position:absolute;inset:8% 0;display:flex;align-items:center;justify-content:center;gap:6%}
.phone-frame{position:relative;display:block;height:100%;aspect-ratio:71.9 / 150;border:1px solid #9da2a7;border-radius:16.7% / 8%;background:#08090b;box-shadow:none;overflow:hidden;box-sizing:border-box}
.work-card .phone-frame img,.dialog-preview .phone-frame img{position:absolute;left:3.69%;top:1.74%;width:92.62%;height:96.52%;object-fit:fill;padding:0;border:0;border-radius:15.4% / 7.1%;transform:none;box-shadow:none;max-height:none;max-width:none}
.dialog-preview[data-presentation=phone]{position:relative;display:block;height:min(62dvh,560px);padding:0;background:radial-gradient(ellipse at 30% 20%,#faf5ee 0,transparent 65%),linear-gradient(135deg,#eee7df,#e0d1c4)}
.phone-scene{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;visibility:hidden}
.scene-ready .phone-scene{visibility:visible}
.scene-ready .phone-pair{opacity:0}
.phone-screens{position:absolute;inset:0;pointer-events:none;visibility:hidden}
.scene-ready .phone-screens{visibility:visible}
.work-card .phone-screens img,.dialog-preview .phone-screens img{position:absolute;display:block;object-fit:fill;max-width:none;max-height:none;padding:0;border:0;box-shadow:none;transform:none;transition:none}
@media(max-width:680px){.work-card[data-presentation=phone]{grid-column:1 / -1}}
.cover-wordmark,.cover-note{position:absolute;left:0;right:0;z-index:1;text-align:center;pointer-events:none;color:#5f4047}
.cover-wordmark{top:2.4%;font-family:Georgia,"Times New Roman",serif;font-size:clamp(16px,4.4cqw,26px);line-height:1;letter-spacing:-.06em}
.cover-note{bottom:3%;font-size:clamp(8px,2.1cqw,11px);line-height:1;letter-spacing:.08em;color:#8a6a71}

@media(max-width:680px){.work-grid[data-collection=case-studies]{grid-template-columns:minmax(0,1fr)!important;gap:36px}.work-grid[data-collection=case-studies] .work-card[data-presentation=phone]{grid-column:auto}.case-study-caption strong{font-size:25px}.case-study-summary{font-size:14px}}