/* Portfolio system: identity, chapters, projects, supporting information. */
:root{color-scheme:dark;font-family:'DM Sans',Arial,sans-serif;font-synthesis:none;background:#000;color:#eeece7;--muted:#b7b4b0;--ease:cubic-bezier(.22,1,.36,1);--identity-size:clamp(34px,3.5vw,48px);--chapter-size:clamp(26px,2.4vw,32px);--project-size:clamp(22px,1.9vw,26px);--feature-size:clamp(24px,2.15vw,28px);--section-space:112px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:#000}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:1px solid #eeece7;outline-offset:5px}h1,h2,h3,p{margin:0;font-weight:400}img,video{display:block;width:100%;height:auto}[hidden]{display:none!important}::selection{background:#504554;color:#fff}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip{position:fixed;top:-70px;left:20px;background:#000;padding:14px;z-index:99}.skip:focus{top:12px}
/* Navigation stays available above a softly feathered blur. */
.site-header{position:absolute;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:flex-start;padding:30px 38px;gap:24px}.wordmark h1,.inner-page .brand-name{font-family:'Inter Tight',Arial,sans-serif;font-size:var(--identity-size);line-height:1.05;letter-spacing:-.05em}.site-header .hero-role{margin-top:12px;font-size:12px;line-height:1.5;letter-spacing:0;color:var(--muted)}.site-header nav{position:fixed;top:27px;right:30px;display:flex;align-items:center;gap:22px;padding:2px 16px;background:#0d0d0d;border:1px solid #202020;border-radius:6px;z-index:50;font-size:14px;line-height:1.5}.site-header nav a{display:flex;align-items:center;min-height:44px;color:#b7b4b0;transition:color .18s}.site-header nav a:hover,.site-header nav a[aria-current]{color:#fff}.menu-toggle{display:none}
/* A spatial opening composed around the central film's actual dimensions. */
.hero{height:100svh;min-height:620px;position:relative;isolation:isolate;--reel-width:min(46vw,72svh,830px);--reel-height:min(25.875vw,40.5svh,466.875px);--sat-large:min(13vw,19svh,190px);--sat-small:min(11vw,15svh,150px)}.floating-field{position:absolute;inset:122px 0 70px;perspective:1300px;overflow:visible}.reel-frame{position:absolute;left:50%;top:50%;width:var(--reel-width);transform:translate(-50%,-50%);z-index:3}.hero-media{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}.hero-media>img,.hero-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-media>video{opacity:0;transition:opacity .35s}.hero-media>video.is-playing{opacity:1}.floating-shot{position:absolute;display:block;width:var(--sat-large);z-index:1;--float-x:16px;--float-y:12px;--float-time:26s;--float-delay:-4s;transform:translate3d(var(--mx,0px),var(--my,0px),0) rotate(var(--angle,0deg));transition:transform 1s var(--ease)}.floating-shot img{aspect-ratio:16/10;object-fit:cover;transition:transform .35s var(--ease)}.floating-shot span{display:block;font-size:12px;line-height:1.4;margin-top:10px;color:#c8c5c0}.floating-shot:hover img{transform:scale(1.025)}.shot-one{left:5%;top:7%;--angle:-6deg}.shot-six{right:5%;top:7%;--angle:5deg;--float-time:29s;--float-delay:-12s}.shot-three{left:4%;top:62%;--angle:-5deg;--float-delay:-18s}.shot-four{right:4%;top:62%;--angle:6deg;--float-time:28s;--float-delay:-8s}.shot-eight{width:var(--sat-small);left:calc(50% - var(--sat-small)/2);top:0;--angle:-4deg;--float-y:5px;--float-time:29s}.shot-five,.shot-seven{width:var(--sat-small);top:calc(100% - var(--sat-small)*.625 - 32px);--float-y:6px}.shot-five{left:26%;--angle:3deg;--float-delay:-20s}.shot-seven{right:26%;--angle:-5deg;--float-time:27s;--float-delay:-15s}
@keyframes float-drift{0%,100%{translate:calc(-1 * var(--float-x)) 0;rotate:-.6deg}25%{translate:0 calc(-1 * var(--float-y));rotate:0deg}50%{translate:var(--float-x) 0;rotate:.6deg}75%{translate:0 var(--float-y);rotate:0deg}}
.js-motion .floating-shot{animation:float-drift var(--float-time) ease-in-out var(--float-delay) infinite}.js-motion .floating-shot:hover,.js-motion .floating-shot:focus-visible,.js-motion .hero.is-motion-paused .floating-shot{animation-play-state:paused}
.enter-films{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:48px;height:48px;z-index:5;color:#b7b4b0}.enter-films svg{width:22px;height:30px;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;animation:arrow-drift 3.6s ease-in-out infinite}@keyframes arrow-drift{0%,20%,100%{translate:0 0;opacity:.75}55%{translate:0 4px;opacity:1}80%{translate:0 0;opacity:.75}}.hero.is-motion-paused .enter-films svg{animation-play-state:paused}
/* Related information stays close; chapters have a larger interval. */
.section-pad{width:min(1200px,calc(100% - 100px));margin:0 auto;padding:0}.work-section,.films-section,.experiments{padding-top:var(--section-space);padding-bottom:0}.section-heading{margin:0 0 44px;text-align:left}.section-heading h2{font-family:'Inter Tight',Arial,sans-serif;font-size:var(--chapter-size);line-height:1.2;letter-spacing:-.025em}.work-grid,.experiment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:80px 64px;align-items:start}.project,.experiment{min-width:0;margin:0}.project-link,.experiment{display:block}#work .project:first-child{grid-column:1/-1;width:84%;justify-self:center}#work>.section-heading,#films>.section-heading{width:84%;margin-inline:auto}.films-grid{width:84%;margin:auto}.project-image,.experiment-image{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}.project-image img,.experiment-image img{height:100%;object-fit:cover;transition:transform .4s var(--ease)}.project h3,.experiment h3{font-family:'Inter Tight',Arial,sans-serif;font-size:var(--project-size);line-height:1.25;letter-spacing:-.02em;margin-top:16px}#work .project:first-child h3,.films-grid h3{font-size:var(--feature-size)}.project-credit,.project-meta,.experiment p{font-size:14px;line-height:1.6;color:var(--muted);margin-top:7px}.project-credit span{display:inline}.featured-copy{display:grid;grid-template-columns:1fr auto;gap:5px 20px;margin-top:16px}.featured-copy h3{grid-column:1;grid-row:1;margin:0}.featured-copy .project-meta{grid-column:2;grid-row:1;margin:0}.featured-copy .project-credit{grid-column:1;margin:0}.project-image .card-preview,.experiment-image .card-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}.card-preview.is-playing{opacity:1}.text-link,.quiet-link{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:#c8c5c0}.text-link:hover{color:#fff}.social-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;color:#c8c5c0}.social-icon svg{width:20px;height:20px;flex-shrink:0}.social-icon:hover{color:#fff}
/* A single project presentation, with predictable next/back navigation. */
dialog{padding:0;width:min(1100px,calc(100% - 48px));max-height:94dvh;background:#000;color:#eeece7;border:0;overflow:auto}dialog::backdrop{background:#000f}body:has(dialog[open]){overflow:hidden}.film-shell{padding:22px}.film-top,.film-info{display:flex;justify-content:space-between;gap:24px;align-items:center}.film-top{margin-bottom:16px;font-size:13px}.eyebrow{color:var(--muted)}.close-film,.photo-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;flex-shrink:0}.close-film svg,.photo-close svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.4}.fullscreen-film{margin-left:auto;font-size:13px;min-height:44px;padding:0 8px;color:#c8c5c0}#film-player{width:100%;max-height:65dvh;aspect-ratio:16/9;background:#000;object-fit:contain}#film-player:focus{outline:none}#film-player:fullscreen{width:100%;height:100%;max-height:none;object-fit:contain}.film-info{margin-top:20px;align-items:flex-start}.film-info h2{font-size:26px;letter-spacing:-.03em}#film-credit,.film-context,#film-duration{font-size:14px;color:var(--muted);line-height:1.65;margin-top:8px}#film-duration{display:block;font-size:12px}.film-context{max-width:620px}.film-context:empty{display:none}#copy-link{font-size:13px;min-height:44px}.film-error{font-size:14px;padding:16px 0}.film-error a{text-decoration:underline}#copy-status{font-size:12px}.film-navigation{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;font-size:13px;color:var(--muted)}.film-navigation button{min-height:44px}.film-navigation button:hover{color:#fff}#film-position{font-size:12px}
/* Reveal motion is brief and independent of video readiness. */
.js-motion .reveal{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .75s var(--ease)}.js-motion .reveal.is-visible{opacity:1;transform:none}.js-motion .section-heading.reveal{transform:none}html.is-anchor-scrolling{scroll-behavior:auto}.motion-off *, .motion-off *:before,.motion-off *:after{animation-play-state:paused!important}.motion-off .reveal{opacity:1;transform:none;transition:none}.motion-off .floating-shot{transform:rotate(var(--angle,0deg))}
@media(max-width:1050px){.site-header{padding:25px 32px}.menu-toggle{position:fixed;top:22px;right:22px;display:flex;align-items:center;gap:14px;z-index:51;background:#0d0d0d;border:1px solid #202020;border-radius:6px;padding:0 14px;min-height:44px;font-size:13px}.menu-toggle span{font-size:18px}.site-header nav{display:none;top:76px;right:22px;left:auto;width:min(280px,calc(100vw - 44px));max-height:calc(100dvh - 98px);overflow:auto;align-items:stretch;flex-direction:column;padding:12px 18px;gap:2px;font-size:16px}.site-header nav.is-open{display:flex}.section-pad{width:calc(100% - 64px)}.work-grid,.experiment-grid{gap:64px 36px}}
@media(max-width:600px){:root{--identity-size:32px;--chapter-size:22px;--project-size:20px;--feature-size:20px;--section-space:104px}html{scroll-padding-top:86px}.site-header{padding:24px 22px}.brand{max-width:calc(100% - 96px)}.wordmark h1{font-size:clamp(26px,8.2vw,32px);white-space:nowrap}.site-header .hero-role{font-size:11px;white-space:nowrap;margin-top:10px}.menu-toggle{right:18px;padding:0 12px;gap:12px}.hero{min-height:560px;--reel-width:88vw;--reel-height:49.5vw}.floating-field{inset:112px 0 72px}.reel-frame{top:47%;width:var(--reel-width)}.floating-shot{--float-x:7px;--float-y:6px;width:27%}.floating-shot span{font-size:12px;line-height:1.4;margin-top:9px}.shot-three,.shot-four,.shot-seven{display:none}.shot-one,.shot-six{width:27%;top:calc(47% - var(--reel-height)/2 - 16.875vw - 60px)}.shot-one{left:8%}.shot-six{right:8%}.shot-five,.shot-eight{width:27%;top:calc(47% + var(--reel-height)/2 + 36px)}.shot-five{left:8%;right:auto}.shot-eight{right:8%;left:auto}.enter-films{bottom:16px}.section-pad{width:calc(100% - 44px)}.section-heading{margin-bottom:32px;text-align:center}#work>.section-heading,#films>.section-heading{width:100%}.work-grid,.experiment-grid{grid-template-columns:minmax(0,1fr);gap:56px}#work .project:first-child,.films-grid{width:100%}.project h3,.experiment h3{margin-top:14px}.project-credit,.project-meta,.experiment p{font-size:13px;line-height:1.6}.featured-copy{display:block;margin-top:14px}.featured-copy .project-meta{margin-bottom:6px}.featured-copy h3{margin:0}.featured-copy .project-credit{margin-top:6px}.js-motion .reveal{transform:none;transition:opacity .6s var(--ease)}#film-dialog{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:none}#film-dialog .film-shell{padding:0 0 24px;min-height:100%;display:flex;flex-direction:column;justify-content:center}#film-dialog .film-top{margin:0 16px 16px;gap:12px;font-size:12px}#film-player{max-height:55dvh}.film-info{padding:0 22px;display:block;margin-top:18px}.film-info h2{font-size:22px}#film-credit,.film-context{font-size:13px}.film-context{margin:12px 22px 0}#film-duration{font-size:12px}#copy-link{margin-top:8px}#copy-status{padding:0 22px}.film-navigation{margin:16px 22px 0;font-size:12px}}
@media(max-width:360px){.site-header{padding-left:18px}.wordmark h1{font-size:26px}.site-header .hero-role{font-size:10px}.floating-shot span{font-size:12px}}
@media(max-width:600px) and (max-height:680px){.shot-five,.shot-eight{display:none}.reel-frame{top:65%}.shot-one,.shot-six{top:calc(65% - var(--reel-height)/2 - 16.875vw - 70px)}.hero{min-height:540px}}
@media(min-width:601px) and (max-height:700px){.hero{--reel-width:min(44vw,64svh);--reel-height:min(24.75vw,36svh);--sat-large:min(12vw,17svh);--sat-small:min(10vw,13svh)}.floating-field{top:114px}.floating-shot{--float-x:10px;--float-y:6px}.shot-eight{top:-5px}.shot-five,.shot-seven{top:calc(100% - var(--sat-small)*.625 - 24px)}}
@media(max-height:500px) and (orientation:landscape){#film-dialog{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0}.film-shell{padding:0}#film-player{max-height:75dvh}.film-top{margin:0 16px}.film-info,.film-context,.film-navigation{margin-top:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js-motion .reveal{opacity:1;transform:none}.floating-shot{transform:rotate(var(--angle,0deg))}}

/* The blur fades before its bounds, with no visible panel edge. */
.site-header nav,.menu-toggle{background:transparent;border:0;border-radius:0;box-shadow:none;isolation:isolate}
.site-header nav::before,.menu-toggle::before{content:"";position:absolute;inset:-22px -30px;z-index:-1;pointer-events:none;background:rgba(8,8,8,.72);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);-webkit-mask-image:radial-gradient(ellipse at center,#000 35%,rgba(0,0,0,.88) 55%,transparent 76%);mask-image:radial-gradient(ellipse at center,#000 35%,rgba(0,0,0,.88) 55%,transparent 76%)}
@media(max-width:1050px){.site-header nav{overflow:visible}.site-header nav::before{inset:-28px -34px;-webkit-mask-image:radial-gradient(ellipse at center,#000 45%,rgba(0,0,0,.88) 62%,transparent 80%);mask-image:radial-gradient(ellipse at center,#000 45%,rgba(0,0,0,.88) 62%,transparent 80%)}.menu-toggle::before{inset:-18px -22px}}