@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@font-face{font-family:Calibre;src:url('/_next/static/media/calibre_regular-s.p.b5a1248d.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Calibre;src:url('/_next/static/media/calibre_medium-s.p.e28f1154.woff2') format('woff2');font-weight:500 700;font-display:swap}
:root{--bg:#f5f5f5;--primary:#171717;--secondary:#525252;--tertiary:#a3a3a3;--top:calc((100vh - 400px)/2.5);--hero-top:clamp(40px,17dvh,180px);--padding:clamp(32px,4vw,56px);--ease:cubic-bezier(.22,.75,.16,1);--gradient-top:#fafafa;--gradient-bottom:#ededed;--gradient-bottom-end:var(--bg);--color-background:var(--bg);color-scheme:light}
:root[data-theme=dark]{--bg:#0a0a0a;--primary:#f5f5f5;--secondary:#a3a3a3;--tertiary:#737373;--gradient-top:#282828;--gradient-bottom:#171717;color-scheme:dark}
*{box-sizing:border-box}html{scrollbar-gutter:stable}body{margin:0;background:var(--bg);color:var(--primary);font-family:'DM Sans',Calibre,Arial,sans-serif;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}button,a{-webkit-tap-highlight-color:transparent}button{border:0;background:none;color:inherit;font:inherit;cursor:pointer;padding:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #888;outline-offset:5px}img{display:block;max-width:100%;user-select:none;-webkit-user-drag:none}.dark{display:none}[data-theme=dark] .light{display:none}[data-theme=dark] .dark{display:block}#home{overflow-x:clip;min-height:100vh}.layout{position:relative;width:calc(100% - var(--padding)*2);max-width:1540px;margin:0 auto}.intro{position:relative;z-index:4;width:600px;max-width:600px;padding-top:var(--hero-top,calc(var(--top) + 25px));margin-bottom:56px}.intro-eyebrow{display:inline-flex;align-items:center;min-height:1.25em;line-height:1.25;font-family:'DM Sans',sans-serif;font-size:36px;font-weight:700;letter-spacing:-0.035em;color:var(--primary);margin-bottom:10px}.intro-name-text{display:inline-block;white-space:pre;background:linear-gradient(180deg,#16181d 0%,#2c3139 42%,#68707d 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}[data-theme=dark] .intro-name-text{background:linear-gradient(180deg,#ffffff 0%,#d6d9e0 42%,#727784 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.intro-cursor{display:inline-block;width:2.5px;height:0.9em;margin-left:4px;background-color:currentColor;border-radius:1px;vertical-align:-0.05em;animation:cursorBlink 1.05s ease-in-out infinite}.intro-cursor.is-typing{animation:none;opacity:1}.intro-cursor.is-done{animation:cursorFadeOut .7s ease forwards 2.5s}@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}@keyframes cursorFadeOut{0%{opacity:1}100%{opacity:0;visibility:hidden}}@media (prefers-reduced-motion:reduce){.intro-cursor{display:none}}.intro-headline{display:inline-flex;align-items:center;flex-wrap:wrap;column-gap:0.26em;row-gap:4px;font-family:'DM Sans',sans-serif;font-size:34px;line-height:1.2;letter-spacing:-0.03em;color:#111;margin-bottom:12px}[data-theme=dark] .intro-headline{color:#f5f5f5}.intro-role-designer{font-weight:400}.intro-role-director{font-weight:400}.intro-headline-nowrap{white-space:nowrap;display:inline-flex;align-items:center}.intro-clatter{display:inline-block;height:0.86em;width:auto;aspect-ratio:1511/1041;object-fit:contain;margin-left:0.08em;pointer-events:none;transform:translateY(-0.04em)}.intro-clatter.dark{display:none}[data-theme=dark] .intro-clatter.light{display:none}[data-theme=dark] .intro-clatter.dark{display:inline-block}.intro-sub{display:block;font-family:'DM Sans',sans-serif;font-size:19px;font-weight:400;line-height:1.45;letter-spacing:-0.015em;color:#8a8a8a;max-width:560px;margin-top:0}[data-theme=dark] .intro-sub{color:#a3a3a3}h1,h2,p{margin:0;font-weight:400}.intro-copy{position:relative;height:auto;transition:height .65s var(--ease)}h2,.biography{font-size:28px;line-height:35px;letter-spacing:-.7px;color:var(--secondary);max-width:580px}.intro h2{font-size:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;max-width:none;font-weight:400;transition:opacity .3s,filter .35s}.biography{font-family:'DM Sans',sans-serif;font-size:22px;line-height:1.35;letter-spacing:-0.02em;color:var(--secondary);max-width:560px;position:absolute;top:0;left:0;opacity:0;filter:blur(4px);visibility:hidden;transition:opacity .35s,filter .5s,visibility .4s}.intro #more{display:flex;align-items:center;gap:5px;font-size:16px;line-height:24px;font-weight:500;color:var(--tertiary);margin-top:16px;transition:color .2s}#more:hover{color:var(--secondary)}#more svg{transition:transform .4s}#projects{position:relative;margin-left:-18px;width:360px;padding-bottom:24vh;transition:opacity .4s,filter .4s,transform .6s var(--ease)}.project-button{height:50px;position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 18px;text-align:left;font-family:'DM Sans',sans-serif;font-size:17px;font-weight:400;letter-spacing:-0.01em;color:#8a8a8a;transition:color .2s ease}[data-theme=dark] .project-button{color:#8a8a8a}.project-button.active{color:#111;font-weight:500}[data-theme=dark] .project-button.active{color:#f5f5f5}.selection{position:absolute;left:0;right:0;top:4px;height:44px;border-radius:18px;background:rgba(255,255,255,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 3px 12px #00000002;backdrop-filter:blur(12px);transition:transform .42s var(--ease);pointer-events:none;display:flex;align-items:center;justify-content:flex-end;padding-right:14px;color:var(--tertiary)}[data-theme=dark] .selection{background:#ffffff09;box-shadow:inset 0 1px 1px #ffffff12,inset 0 0 0 1px #ffffff07}
.display-column{position:absolute;top:0;bottom:0;left:640px;width:calc(100% - 640px);transition:opacity .5s,filter .5s,transform .65s var(--ease)}.display-sticky{position:sticky;top:0;padding-top:var(--hero-top,calc(var(--top) + 25px));height:100vh;display:flex;justify-content:center}#previews{position:relative;width:100%;height:100%;overflow:hidden;border-radius:2px;background:white}.preview{position:absolute;inset:0;opacity:0;transform:scale(.96);filter:blur(3px);transition:opacity .28s ease,filter .35s,transform .5s var(--ease)}.preview.active{opacity:1;filter:blur(0);transform:scale(1);z-index:2}.preview img,.preview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}footer{position:fixed;z-index:10;bottom:24px;right:24px;display:flex;align-items:center;gap:18px;font-size:14px;color:var(--tertiary)}.themes{display:flex;gap:2px;padding:3px;border-radius:8px;background:#00000003;margin-left:8px}.themes button{width:22px;height:22px;border-radius:6px;display:grid;place-items:center}.themes button[aria-pressed=true]{background:#fafafa;box-shadow:0 1px 3px #0003;color:var(--secondary)}.themes svg{height:20px;width:20px;stroke:currentColor;stroke-width:.9;fill:none}[data-theme=dark] .themes button[aria-pressed=true]{background:#404040cc}.portrait{position:fixed;bottom:0;left:50%;z-index:3;width:95vh;max-width:1000px;transform:translateX(-25%);pointer-events:none;opacity:0;visibility:hidden;filter:blur(5px);transition:opacity .7s .1s,visibility .7s,filter 1s}.portrait img{width:100%}.about-open .portrait{opacity:1;visibility:visible;filter:blur(0)}.about-open .intro-copy{height:350px}.about-open .intro h2{opacity:0;filter:blur(4px)}.about-open .biography{opacity:1;filter:blur(0);visibility:visible}.about-open #projects,.about-open .display-column{opacity:0;filter:blur(5px);pointer-events:none}.about-open #more svg{transform:rotate(180deg)}
dialog{border:0;max-width:none;max-height:none;width:100%;height:100%;margin:0;padding:0 var(--padding);background:var(--bg);color:var(--primary);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;opacity:0;transition:opacity .23s}dialog::backdrop{background:var(--bg)}dialog.visible{opacity:1}.gallery-layout{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:48px;max-width:1080px;margin:auto}.gallery-nav{position:sticky;top:0;display:flex;gap:24px;padding-top:var(--top);margin-left:-24px;flex-shrink:0;max-width:350px}.gallery-nav>div{padding-top:7px}.gallery-nav h2{font-size:24px;font-weight:500;line-height:29px;color:var(--primary);white-space:nowrap}.gallery-nav a{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:500;color:var(--tertiary);margin-top:2px}.gallery-nav a:hover{color:var(--secondary)}.gallery-nav a span{font-size:12px}#back{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;flex-shrink:0;transition:background .2s}#back:hover{background:#8881}#back svg{width:24px;height:24px}#gallery{width:700px;max-width:calc(100% - 300px);padding:var(--top) 0;display:flex;flex-direction:column;gap:40px}.gallery-figure{margin:0;position:relative;flex-shrink:0}.media-box{position:relative;aspect-ratio:100/58;overflow:hidden;border-radius:12px;box-shadow:0 0 0 1px #8882,0 1px 2px #0001;background:var(--media-bg,#fff)}.media-box img,.media-box video{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.media-box video{z-index:1}.gallery-figure figcaption{font-size:16px;color:var(--secondary);padding-top:12px}.gallery-figure figcaption a:hover{text-decoration:underline}.media-box.cropped{background-size:cover;background-position:center}.cropped video{width:80%;height:82%;top:9%;left:20%;object-fit:cover;object-position:left;border-radius:10px}.cropped.left video{left:0;object-position:right}.gallery-figure:not(:first-child){animation:reveal .6s var(--ease) both;animation-delay:.12s}@keyframes reveal{from{opacity:0;transform:translateY(30px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
@media(min-width:1024px) and (max-width:1279px){#gallery{width:600px}.display-column{left:640px;width:calc(100% - 640px)}}
@media(max-width:1023px){:root{--top:52px;--padding:40px}.layout{max-width:400px}.intro{width:100%;height:230px;margin-bottom:0;z-index:2;padding-top:36px}h1{font-size:24px;line-height:30px;margin-bottom:4px}.intro h2,.biography{font-size:24px;line-height:30px;letter-spacing:-.6px}.intro-copy{height:54px}.display-column{position:sticky;left:auto;top:40px;width:100%;height:400px;z-index:5;pointer-events:none}.display-sticky{position:relative;height:auto;padding:0}#projects{margin:16px 0 0;width:100%;padding-bottom:calc(100vh - 440px - 180px)}.project-button{height:48px;font-size:18px}.selection{height:40px}.portrait{width:55vh;transform:translateX(-50%)}.about-open .intro{z-index:6}.about-open .intro-copy{height:300px}.about-open .biography{max-width:340px}footer{gap:16px;top:calc(16px + env(safe-area-inset-top,0px));right:16px;bottom:auto;z-index:20}dialog{padding:0 20px}.gallery-layout{display:block;max-width:700px}.gallery-nav{position:relative;padding:48px 0;display:flex;justify-content:center;margin:0;max-width:none;text-align:center}.gallery-nav>div{padding:0}.gallery-nav h2{font-size:24px}.gallery-nav a{font-size:18px}#back{position:fixed;right:20px;top:20px;z-index:5;background:var(--bg);box-shadow:0 1px 5px #0001}#gallery{width:100%;max-width:100%;padding:0 0 100px;gap:20px}.media-box{border-radius:8px}}
@media(max-width:479px){.display-column{height:calc(100vw - 80px)}#projects{padding-bottom:calc(100vh - 100vw - 100px)}.about-open .portrait{max-width:45vh}.about-open .biography{font-size:22px;line-height:27px}.about-open .intro-copy{height:300px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

[hidden]{display:none!important}

@media(max-width:1023px){footer:before{display:none!important}footer{isolation:isolate}}
@media(min-width:1024px){.intro{position:sticky;top:0;background:var(--bg);margin-left:-32px;padding-left:32px;width:600px;max-width:600px}.intro:after{content:"";position:absolute;left:0;right:0;bottom:-64px;height:64px;background:linear-gradient(var(--bg) 20%,transparent);pointer-events:none}.workstation{transform:translateX(-50px)}}

/* Theme-matched studio renders. The table dissolves into the page at its outer edges. */
.workstation{position:relative;flex:0 0 auto;width:136%;max-width:1140px;align-self:flex-start;margin-top:2.5%;isolation:isolate;--screen-left:24.880383%;--screen-top:15.515409%;--screen-width:50.239234%;--screen-height:45.483528%}
.studio-scene{position:relative;width:100%;aspect-ratio:16/9;pointer-events:none;background:var(--bg);transition:background .3s;mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 91%,transparent 100%),linear-gradient(to right,transparent,#000 2%,#000 98%,transparent);mask-composite:intersect}
.studio-render{position:absolute;inset:0;display:block;width:100%;height:auto;pointer-events:none;transition:opacity .45s ease}
.studio-day{opacity:1;mix-blend-mode:darken}.studio-night{opacity:0;mix-blend-mode:lighten}
[data-theme=dark] .studio-day{opacity:0}[data-theme=dark] .studio-night{opacity:1}
.studio-screen{position:absolute;left:calc(var(--screen-left) - .5px);top:calc(var(--screen-top) - .5px);width:calc(var(--screen-width) + 1px);height:calc(var(--screen-height) + 1px);z-index:2;overflow:hidden;background:#101012 url("/assets/studio/imac-white-wallpaper.jpg") center/cover no-repeat;border-radius:1px;padding:0;box-shadow:none;pointer-events:auto;container-type:inline-size}
.studio-screen #previews{position:absolute;inset:0;height:100%;width:100%;max-width:none;border-radius:0;box-shadow:none}
@media(max-width:1023px){.workstation{width:135%;max-width:calc(100vw - 12px);margin-top:8px}.studio-screen{border-radius:2px}}

/* Continuous screen-to-gallery motion and lightweight liquid-glass controls. */
:root{--ease:cubic-bezier(.22,.8,.18,1);--glass-fill:linear-gradient(135deg,#fff9,#ffffff30 50%,#ffffff65);--glass-line:#ffffffad;--glass-shadow:0 6px 20px #00000008,inset 0 1px 0 #fff,inset 0 -1px 0 #ffffff65}
:root[data-theme=dark]{--glass-fill:linear-gradient(135deg,#ffffff18,#ffffff06 50%,#ffffff0d);--glass-line:#ffffff1c;--glass-shadow:0 6px 24px #0005,inset 0 1px 0 #ffffff38,inset 0 -1px 0 #ffffff08}
.selection{z-index:0;border-radius:18px;background:var(--glass-fill);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);backdrop-filter:blur(18px) saturate(1.7);-webkit-backdrop-filter:blur(18px) saturate(1.7);transition:none;will-change:transform;transform-origin:center;overflow:hidden}
[data-theme=dark] .selection{background:var(--glass-fill);box-shadow:var(--glass-shadow)}
.selection:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at var(--shine-x,50%) 0%,#ffffff70,transparent 65%);opacity:.65;pointer-events:none}
.selection:after{content:"";position:absolute;inset:1px;border-radius:inherit;border-top:1px solid #ffffff60;pointer-events:none}
[data-theme=dark] .selection:before{opacity:.24}.selection svg{position:relative}
.project-button{z-index:1;transition:color .18s ease,transform .3s var(--ease)}.project-button:active{transform:scale(.985)}
.preview{filter:none;transform:translate3d(0,5px,0) scale(.985);transition:opacity .32s ease,transform .48s var(--ease);backface-visibility:hidden}
.preview.active{filter:none;transform:translate3d(0,0,0) scale(1)}
.preview video{opacity:0;transition:opacity .22s ease}.preview video.ready{opacity:1}
.preview:not(.active){pointer-events:none}
.themes{position:relative;isolation:isolate;padding:4px;gap:2px;border-radius:20px;background:var(--glass-fill);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6)}
.themes:before{content:"";position:absolute;z-index:-1;left:4px;top:4px;width:28px;height:28px;border-radius:50%;background:linear-gradient(140deg,#fff,#ffffff6b);box-shadow:0 2px 5px #00000016,inset 0 0 0 1px #ffffffa0;transform:translate3d(calc(var(--theme-index,0)*30px),0,0);transition:transform .5s var(--ease),background .45s}
[data-theme=dark] .themes:before{background:linear-gradient(140deg,#7777,#4449);box-shadow:0 2px 6px #0005,inset 0 1px 0 #ffffff50}
.themes button{width:28px;height:28px;border-radius:50%;transition:color .25s,transform .3s var(--ease)}
.themes button[aria-pressed=true],[data-theme=dark] .themes button[aria-pressed=true]{background:none;box-shadow:none;color:var(--primary)}
.themes button:active{transform:scale(.9)}
#back{background:var(--glass-fill);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);transition:transform .35s var(--ease),box-shadow .3s}
#back:hover{background:var(--glass-fill);transform:scale(1.06)}#back:active{transform:scale(.94)}
.intro #more{width:fit-content;border-radius:16px;padding:2px 8px;margin-left:-8px;transition:background .25s,color .25s,transform .3s}
#more:hover{background:var(--glass-fill)}#more:active{transform:scale(.96)}
#home .intro,#home #projects,#home .display-column{transition:opacity .4s ease,transform .6s var(--ease)}
.gallery-open #home .intro,.gallery-open #projects,.gallery-open .display-column{opacity:0;pointer-events:none}
.gallery-open #home .intro,.gallery-open #projects{transform:translate3d(-12px,0,0)}
.gallery-open footer{opacity:0;pointer-events:none}footer{transition:opacity .3s ease}
.about-open #projects,.about-open .display-column{opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,8px,0)}
.portrait{filter:none;transition:opacity .6s ease,visibility .6s,transform .7s var(--ease)}
.biography{filter:none;transform:translateY(8px);transition:opacity .4s ease,transform .6s var(--ease),visibility .4s}
.about-open .biography{transform:none;filter:none}.about-open .intro h2{filter:none}
dialog{background:transparent;opacity:1;transition:none;isolation:isolate}
dialog::backdrop{background:transparent}
dialog:before{content:"";position:fixed;inset:0;z-index:-1;background:var(--bg);opacity:0;transition:opacity .42s ease;pointer-events:none}
dialog.visible:before{opacity:1}
dialog.transitioning{overflow:hidden}
.gallery-nav{opacity:0;transform:translate3d(-14px,0,0);transition:opacity .3s ease,transform .55s var(--ease)}
dialog.visible .gallery-nav{opacity:1;transform:none}
.gallery-figure:not(:first-child){animation:none;opacity:0;transform:translate3d(0,22px,0);transition:opacity .4s ease,transform .6s var(--ease);transition-delay:0ms}
dialog.visible .gallery-figure:not(:first-child){opacity:1;transform:none;transition-delay:var(--reveal-delay,0ms)}
.hero-host{background:transparent;box-shadow:none;overflow:visible}
.hero-host>.preview{overflow:hidden;border-radius:12px;box-shadow:0 0 0 1px #8882,0 8px 25px #00000008}
.shared-media{position:fixed;z-index:20;overflow:hidden;transform-origin:0 0;pointer-events:none;will-change:transform;border-radius:12px;box-shadow:0 0 0 1px #8882;backface-visibility:hidden}
.shared-media>.preview,.hero-host>.preview{opacity:1;transform:none;filter:none;transition:none}
@media(max-width:1023px){.themes{margin-left:0}footer{gap:12px}.hero-host>.preview{border-radius:8px}}
@media(prefers-reduced-motion:reduce){.selection,.shared-media{will-change:auto}}

/* Keep the About transition in the original layout; only copy height and opacity change. */
#home{overflow-anchor:none}
.intro-copy{will-change:height}
.intro #more{min-width:64px}

/* Monochrome brand marks, aligned consistently with each portfolio destination. */
.project-button{justify-content:flex-start;gap:12px;padding-right:44px}
.project-icon{display:block;flex:0 0 20px;width:20px;height:20px;background:#646464;-webkit-mask:var(--project-icon) center/contain no-repeat;mask:var(--project-icon) center/contain no-repeat;transition:background-color .2s ease}
.project-button.active .project-icon{background:#222}
[data-theme=dark] .project-icon,[data-theme=dark] .project-button.active .project-icon{background:#f5f5f5}
.project-label{min-width:0}

/* A miniature desktop inside the existing monitor, with live portfolio previews. */
.intro h2{max-width:none}
.portrait img{height:auto}
.project-button[data-project="dem-productions"] .project-icon{-webkit-mask-size:122%;mask-size:122%}
.desktop-menubar{position:absolute;inset:0 0 auto;height:5.8%;display:flex;align-items:center;gap:2cqi;padding:0 2cqi;background:#d8dbe225;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-family:Arial,sans-serif;font-size:1.65cqi;line-height:1;pointer-events:none}
.desktop-brand{height:2.2cqi;width:2.2cqi;background:#fff;-webkit-mask:url('/assets/dem-logo.png') center/contain no-repeat;mask:url('/assets/dem-logo.png') center/contain no-repeat}
.desktop-menubar strong{font-weight:600}.desktop-status{display:flex;align-items:center;gap:1.6cqi;margin-left:auto}.desktop-status svg{width:2.5cqi;height:2.5cqi}
.desktop-window{position:absolute;top:8.5%;left:19%;width:62%;display:flex;flex-direction:column;border-radius:1.3cqi;overflow:hidden;background:#fff;box-shadow:0 2.5cqi 7cqi #0008,0 0 0 .2cqi #ffffff70;isolation:isolate}
.window-toolbar{height:3.8cqi;flex-shrink:0;padding:0 1.3cqi;display:flex;align-items:center;gap:1.4cqi;background:linear-gradient(#fbfbfd,#eaecee);color:#797d83;border-bottom:.2cqi solid #00000012;font-family:Arial,sans-serif;font-size:1.5cqi;pointer-events:none}
.window-controls{display:flex;gap:.6cqi;flex-shrink:0}.window-controls i{display:block;width:1.1cqi;height:1.1cqi;border-radius:50%;background:#ff6058;box-shadow:inset 0 0 0 .1cqi #0002}.window-controls i:nth-child(2){background:#ffbf2f}.window-controls i:nth-child(3){background:#29ca42}
.window-nav{display:flex;gap:.65cqi}.window-nav svg,.window-expand{width:1.9cqi;height:1.9cqi;fill:none;stroke:currentColor;stroke-width:1.5;flex-shrink:0}.window-nav svg:last-child{opacity:.4}
.window-address{display:flex;align-items:center;justify-content:center;gap:.7cqi;flex:1;min-width:0;height:2.5cqi;margin:0 .8cqi;padding:0 1cqi;border-radius:.55cqi;background:#dce0e580;box-shadow:inset 0 0 0 .15cqi #c7ccd24d;white-space:nowrap;overflow:hidden}
.window-address svg{width:1.35cqi;height:1.35cqi;fill:none;stroke:currentColor;stroke-width:1.6;flex-shrink:0}#window-title{overflow:hidden;text-overflow:ellipsis}
.window-content{position:relative;display:block;width:100%;aspect-ratio:1400/812;min-height:0;text-align:left;overflow:hidden;background:white;border-radius:0;cursor:zoom-in}
.window-content:focus-visible{outline:1px solid white;outline-offset:-2px}
.desktop-dock{position:absolute;bottom:2.4%;left:50%;transform:translateX(-50%);display:flex;gap:1cqi;align-items:center;padding:1cqi 1.2cqi 1.6cqi;border-radius:1.6cqi;background:linear-gradient(135deg,#ffffff60,#dce2ee28);box-shadow:inset 0 0 0 .2cqi #ffffff60,0 .6cqi 2cqi #0004;backdrop-filter:blur(8px) saturate(1.3);-webkit-backdrop-filter:blur(8px) saturate(1.3)}
.dock-app{position:relative;width:4.6cqi;height:4.6cqi;flex:0 0 4.6cqi;display:grid;place-items:center;border-radius:1.05cqi;background:linear-gradient(145deg,#606873,#22272e);box-shadow:inset 0 .15cqi .2cqi #ffffff55,0 .25cqi .55cqi #0004;transition:transform .25s var(--ease);transform-origin:50% 100%}
.dock-app:hover,.dock-app:focus-visible{transform:translateY(-.65cqi) scale(1.12)}.dock-app:active{transform:scale(.94)}
.dock-app::after{content:"";position:absolute;bottom:-1.1cqi;width:.6cqi;height:.6cqi;border-radius:50%;background:#fff;opacity:0;transition:opacity .2s}
.dock-app[aria-pressed="true"]::after{opacity:1}
.dock-glyph{width:2.9cqi;height:2.9cqi;background:#fff;-webkit-mask:var(--project-icon) center/contain no-repeat;mask:var(--project-icon) center/contain no-repeat}
.dock-app[data-project="dem-productions"] .dock-glyph{-webkit-mask-size:122%;mask-size:122%}
.dock-app[data-project="x"]{background:linear-gradient(145deg,#303136,#050506)}
.dock-app[data-project="instagram"]{background:linear-gradient(35deg,#ffb839,#ef2d5d 48%,#ae36ba 77%,#7058df)}
.dock-app[data-project="films"]{background:linear-gradient(145deg,#ff6160,#e81028)}
.dock-app[data-project="albums"]{background:linear-gradient(145deg,#43e886,#11a34a)}
.dock-app[data-project="contact"]{background:linear-gradient(145deg,#53c2ff,#0079ed)}
[data-theme="dark"] .window-toolbar{background:linear-gradient(#34353a,#25262b);border-bottom-color:#ffffff10;color:#bdc1c9}
[data-theme="dark"] .window-address{background:#16181d99;box-shadow:inset 0 0 0 .15cqi #ffffff12}
[data-theme="dark"] .desktop-window{box-shadow:0 2.5cqi 7cqi #000a,0 0 0 .2cqi #ffffff38}
[data-theme="dark"] .desktop-dock{background:linear-gradient(135deg,#9ea6b348,#62697935);box-shadow:inset 0 0 0 .2cqi #ffffff38,0 .6cqi 2cqi #0006}
@media(max-width:1023px){.intro h2{font-size:24px;line-height:30px;max-width:100%}}
@media(hover:none){.dock-app:hover{transform:none}}

/* Destination-specific copy and transparent personal branding. */
#project-description{max-width:260px;margin-top:10px;font-size:18px;line-height:24px;font-weight:400;letter-spacing:-.15px;color:var(--secondary)}
.gallery-nav a{margin-top:14px}
.gallery-nav #live-label{font-size:inherit}
#live-link[hidden]{display:none}
.window-address.no-address svg{visibility:hidden}
@media(max-width:1023px){#project-description{margin-left:auto;margin-right:auto}.gallery-nav>div{min-width:0}.gallery-nav h2{white-space:normal}}

/* Live desktop status with a quiet, slow availability pulse. */
.desktop-menubar{background:#17191dcc;white-space:nowrap}
.desktop-brand,.desktop-status svg{flex-shrink:0}
.desktop-status{gap:1.8cqi}
.desktop-availability{display:inline-flex;align-items:center;gap:1.25cqi;color:#f3f5f4;font-weight:400}
.availability-dot{position:relative;display:block;flex:0 0 1.05cqi;width:1.05cqi;height:1.05cqi;border-radius:50%;background:#71dc91;box-shadow:0 0 .45cqi #65e38b66}
.availability-dot::after{content:"";position:absolute;inset:-.25cqi;border-radius:50%;background:#4dd78744;box-shadow:0 0 .8cqi .3cqi #42d87844;animation:availability-glow 5s ease-in-out infinite}
#desktop-clock{font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.01em}
@keyframes availability-glow{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:.9;transform:scale(1.35)}}
@media(prefers-reduced-motion:reduce){.availability-dot::after{animation:none;opacity:.4}}

/* About swaps the two scenes in sequence, without ghosting or geometry changes. */
#home .intro{transition:opacity .25s ease,transform .45s var(--ease)}
.intro-copy{transition:height .5s var(--ease);will-change:auto}
.intro h2{filter:none;transition:opacity .28s ease .19s}
.about-open .intro h2{filter:none;transition:opacity .15s ease}
.biography{filter:none;transform:translate3d(0,5px,0);transition:opacity .16s ease,transform .25s var(--ease),visibility 0s .18s}
.about-open .biography{filter:none;transform:translate3d(0,0,0);transition:opacity .32s ease .19s,transform .4s var(--ease) .19s,visibility 0s}
#home #projects,#home .display-column{filter:none;transform:none;transition:opacity .36s ease .21s;will-change:opacity}
.about-open #home #projects,.about-open #home .display-column{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:none;transition:opacity .18s ease,visibility 0s .18s}
.about-transitioning #projects,.about-transitioning .display-column{pointer-events:none}
.portrait{filter:none;transform:translate3d(-25%,0,0);transition:opacity .18s ease,visibility 0s .19s;will-change:opacity}
.about-open .portrait{filter:none;transition:opacity .42s ease .21s,visibility 0s}
.gallery-open #home #projects,.gallery-open #home .display-column{transition-delay:0s}
@media(max-width:1023px){.portrait{transform:translate3d(-50%,0,0)}}
@media(max-width:479px){.portrait,.about-open .portrait{max-width:45vh}}

/* Selected thumbnail work: one film followed by six full-width glass cards. */
.preview-contain{background:transparent}
.preview-contain img,.preview-contain video{object-fit:contain}
.hero-host{display:block}
.hero-host>.preview-contain video{pointer-events:none}
.work-card{isolation:isolate;border-radius:22px;background:var(--glass-fill);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow),inset 0 0 0 1px #ffffff38,0 12px 36px #20354608;backdrop-filter:blur(22px) saturate(1.7);-webkit-backdrop-filter:blur(22px) saturate(1.7)}
.work-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(ellipse at 8% 0%,#ffffffb0,transparent 52%),linear-gradient(125deg,#ffffff24,transparent 44%,#bbc7d318);pointer-events:none}
.work-card::after{content:"";position:absolute;inset:1px;border-radius:inherit;border-top:1px solid #ffffffb3;border-bottom:1px solid #ffffff60;pointer-events:none}
.work-card-link{display:block;padding:16px;border-radius:inherit;transition:background .25s ease,box-shadow .25s ease}
.work-card-link:hover{background:#ffffff35;box-shadow:0 8px 24px #1929380a}
.work-card-link:focus-visible{outline:2px solid #2598d5;outline-offset:5px}
.work-thumbnail-wrap{position:relative;isolation:isolate}
.work-thumbnail{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:13px;background:#e0e0e0}
.work-duration{position:absolute;right:9px;bottom:9px;padding:3px 5px;border-radius:4px;background:#000c;color:#fff;font:600 12px/1.1 Arial,Helvetica,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.1px}
.work-details{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:11px;row-gap:5px;margin:13px 2px 3px;font-family:Arial,Helvetica,sans-serif}
.work-avatar{grid-column:1;grid-row:1/3;width:36px;height:36px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px #1110000d}
.work-identity{display:contents}
.work-identity h3{grid-column:2;margin:0;font:600 18px/1.35 Arial,Helvetica,sans-serif;letter-spacing:-.25px;color:var(--primary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.work-stats{grid-column:2;display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;font-size:13px;line-height:22px;color:var(--secondary);font-variant-numeric:tabular-nums}
.work-stats>*{flex-shrink:0}
.work-channel{display:inline-flex;align-items:center;gap:4px;min-width:0;flex-shrink:1;max-width:145px}
.work-channel-name{overflow:hidden;text-overflow:ellipsis}
.work-channel-check{flex:0 0 12px;width:12px;height:12px}
.work-channel-check circle{fill:var(--secondary)}
.work-channel-check path{fill:none;stroke:var(--bg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.work-views{display:inline-flex;align-items:center;gap:3px}
.work-views svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.2}
.work-subscribers{display:inline-flex;align-items:center;gap:3px;padding:0 7px;border-radius:99px;background:#ffffff88;box-shadow:inset 0 1px 1px #fff,inset 0 0 0 1px #ffffff75;font-size:11px;line-height:20px}
.work-subscribers strong{font-weight:600;color:#087db5}
.work-subscriber-short{display:none}
.work-outlier{display:inline-flex;align-items:center;border-radius:99px;padding:0 8px;color:#fff;font-size:11px;line-height:20px;background:linear-gradient(135deg,#e32371,#aa0347);box-shadow:inset 0 1px 0 #ffffff65,0 0 10px #d8116838,0 2px 6px #ad074c20}
.work-outlier strong{font-size:inherit;font-weight:600}
.work-outlier.is-blue{background:linear-gradient(135deg,#23b5fa,#007bcc);box-shadow:inset 0 1px 0 #ffffff65,0 0 10px #0b9feb38,0 2px 6px #0077b920}
.work-stats-note{font-size:14px;line-height:1.4;color:var(--secondary);text-align:center;margin:0 16px}
[data-theme=dark] .work-card{background:var(--glass-fill);border-color:var(--glass-line);box-shadow:var(--glass-shadow),inset 0 0 0 1px #ffffff08}
[data-theme=dark] .work-card::before{background:radial-gradient(ellipse at 8% 0%,#ffffff14,transparent 55%),linear-gradient(125deg,#ffffff08,transparent 45%,#9cb9d707)}
[data-theme=dark] .work-card::after{border-top-color:#ffffff38;border-bottom-color:#ffffff08}
[data-theme=dark] .work-card-link:hover{background:#ffffff05;box-shadow:0 8px 24px #0003}
[data-theme=dark] .work-thumbnail{background:#151515}
[data-theme=dark] .work-subscribers{background:#ffffff0a;box-shadow:inset 0 1px 0 #ffffff26,inset 0 0 0 1px #ffffff12}
[data-theme=dark] .work-subscribers strong{color:#74cdf7}
@media(max-width:599px){
  .work-card{border-radius:17px}.work-card-link{padding:10px}.work-thumbnail{border-radius:10px}
  .work-details{grid-template-columns:30px minmax(0,1fr);column-gap:9px;row-gap:7px;margin:11px 1px 2px}
  .work-avatar{grid-row:1;width:30px;height:30px}.work-identity h3{font-size:15px;line-height:1.35}
  .work-stats{grid-column:1/-1;gap:6px;font-size:12px;line-height:20px}
  .work-channel{max-width:120px}.work-channel-check{width:11px;height:11px;flex-basis:11px}
  .work-subscribers{padding:0 6px;font-size:10px}.work-subscriber-label{display:none}.work-subscriber-short{display:inline}
  .work-outlier{font-size:10px;padding:0 6px}.work-duration{right:7px;bottom:7px;font-size:11px}
  .work-stats-note{font-size:13px;margin:0 8px}
}
@media(max-width:379px){.work-stats{gap:5px;font-size:11px}.work-channel{max-width:78px}.work-subscribers,.work-outlier{padding:0 5px}}

/* Keep hidden previews out of composites and preserve native text alignment. */
#previews{background:var(--bg);text-align:left}.preview{text-align:left}
#previews>.preview{transform:none;filter:none;transition:opacity .36s cubic-bezier(.2,.65,.25,1),visibility 0s .36s;visibility:hidden}
#previews>.preview.active{visibility:visible;transition:opacity .36s cubic-bezier(.2,.65,.25,1);transform:none}
#previews>.preview.preview-departing{visibility:visible;opacity:1;z-index:1;transition:none}
#previews>.preview.in-flight{visibility:visible}
.shared-media{box-shadow:none;contain:layout paint;will-change:transform,clip-path}
.shared-media>.preview{visibility:visible}
dialog.transitioning .gallery-figure:not(:first-child){opacity:0;transform:translateY(10px);transition-delay:0s}
dialog.visible:before{transition-duration:.28s}
#home .display-column{transition:opacity .24s ease}

.shared-media>.preview{mask-image:none;-webkit-mask-image:none}

.media-stage{position:absolute;top:0;left:0;transform-origin:0 0;overflow:hidden}
.gallery-returning #home .intro,.gallery-returning #home #projects,.gallery-returning #home .display-column{transition:opacity .36s ease .08s}
dialog:not(.visible) .gallery-nav{transition:opacity .12s ease,transform .3s var(--ease)}
dialog.transitioning:not(.visible) .gallery-figure:not(:first-child){transition:opacity .12s ease,transform .2s var(--ease)}

/* A scrolled gallery returns as one continuous clipped surface. */
.gallery-flight{border-radius:0}
.gallery-flight #gallery .gallery-figure{opacity:1!important;transform:none!important;transition:none!important}
.gallery-flight #gallery{pointer-events:none}
/* Match the flight's 12px corner endpoint without changing native video sizing. */
.shared-media:has(.media-stage){border-radius:0}
.hero-host>.preview:has(.media-stage){border-radius:12px;box-shadow:none}
.media-stage>img,.media-stage>video{object-fit:contain}

/* Soften the scrolling work column at the viewport edge. Keep the live
   monitor transition above this non-interactive, theme-matched overlay. */
dialog:not(.social-project):not(.x-project):not(.collection-project)::after{content:'';position:fixed;inset:auto 0 0;height:72px;z-index:3;background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none;opacity:0;transition:opacity .2s ease}
dialog.visible:not(.transitioning):not(.social-project):not(.x-project):not(.collection-project)::after{opacity:1}
@media(prefers-reduced-motion:reduce){dialog::after{transition:none!important}}

/* Top Progress Loader */
.loader-progress-track{position:fixed;top:0;left:0;right:0;height:2.5px;z-index:99999;pointer-events:none;overflow:hidden;background:transparent}
.loader-progress-bar{height:100%;width:100%;transform-origin:left center;transform:scaleX(0.2);background:linear-gradient(90deg,transparent,#171717 65%,#454545);transition:transform .75s cubic-bezier(.22,.8,.18,1),opacity .45s ease}
[data-theme=dark] .loader-progress-bar{background:linear-gradient(90deg,transparent,#f5f5f5 65%,#999)}
html.app-ready .loader-progress-bar{transform:scaleX(1);opacity:0;transition:transform .55s cubic-bezier(.22,.8,.18,1),opacity .4s ease .4s}

/* Hero Entrance Choreography */
@keyframes heroEntranceFadeUp{0%{opacity:0;transform:translate3d(0,22px,0);filter:blur(4px)}100%{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}}
@keyframes heroEntranceSlideRight{0%{opacity:0;transform:translate3d(-20px,0,0);filter:blur(4px)}100%{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}}
@keyframes heroEntranceScale{0%{opacity:0;transform:scale(.95) translate3d(0,16px,0);filter:blur(6px)}100%{opacity:1;transform:scale(1) translate3d(0,0,0);filter:blur(0)}}
@keyframes clatterPop{0%{opacity:0;transform:translateY(-0.04em) scale(.4) rotate(-10deg)}65%{transform:translateY(-0.04em) scale(1.08) rotate(3deg)}100%{opacity:1;transform:translateY(-0.04em) scale(1) rotate(0deg)}}

html:not(.app-ready) .intro-eyebrow,
html:not(.app-ready) .intro-headline,
html:not(.app-ready) .intro-sub,
html:not(.app-ready) #more,
html:not(.app-ready) #projects,
html:not(.app-ready) .workstation,
html:not(.app-ready) footer{opacity:0}

html.app-ready .intro-eyebrow{animation:heroEntranceFadeUp .7s cubic-bezier(.22,.8,.18,1) both;animation-delay:.06s}
html.app-ready .intro-headline{animation:heroEntranceFadeUp .8s cubic-bezier(.22,.8,.18,1) both;animation-delay:.14s}
html.app-ready .intro-clatter{animation:clatterPop .75s cubic-bezier(.34,1.56,.64,1) both;animation-delay:.28s}
html.app-ready .intro-sub{animation:heroEntranceFadeUp .8s cubic-bezier(.22,.8,.18,1) both;animation-delay:.22s}
html.app-ready #more{animation:heroEntranceFadeUp .7s cubic-bezier(.22,.8,.18,1) both;animation-delay:.30s}
html.app-ready #projects{animation:heroEntranceSlideRight .85s cubic-bezier(.22,.8,.18,1) both;animation-delay:.24s}
html.app-ready .workstation{animation:heroEntranceScale .95s cubic-bezier(.22,.8,.18,1) both;animation-delay:.16s}
html.app-ready footer{animation:heroEntranceFadeUp .7s cubic-bezier(.22,.8,.18,1) both;animation-delay:.38s}

.project-button{will-change:transform,color}
.project-button:hover{color:var(--primary);transform:translate3d(4px,0,0)}
[data-theme=dark] .project-button:hover{color:#fff}
.project-button:active{transform:translate3d(2px,0,0) scale(.985)}

@media(prefers-reduced-motion:reduce){
  html:not(.app-ready) .intro-eyebrow,
  html:not(.app-ready) .intro-headline,
  html:not(.app-ready) .intro-sub,
  html:not(.app-ready) #more,
  html:not(.app-ready) #projects,
  html:not(.app-ready) .workstation,
  html:not(.app-ready) footer,
  html.app-ready .intro-eyebrow,
  html.app-ready .intro-headline,
  html.app-ready .intro-clatter,
  html.app-ready .intro-sub,
  html.app-ready #more,
  html.app-ready #projects,
  html.app-ready .workstation,
  html.app-ready footer{opacity:1!important;animation:none!important;transform:none!important;filter:none!important}
}