.reel,.about-view,.work-view{--reel-space-top:clamp(0px, .8dvh, 10px);--reel-space-bottom:clamp(24px, 5dvh, 56px);--reel-space-media-meta:clamp(40px, 7.5dvh, 88px);--reel-meta-reserve:9.5rem}@media (width>=641px){.reel,.about-view,.work-view{--reel-space-bottom:calc(var(--header-inset-top) + env(safe-area-inset-top,0px))}}@media (width<=640px){.reel,.about-view,.work-view{--reel-v-gap:clamp(22px, 3.5dvh, 36px);--reel-space-top:0px;--content-offset-top:var(--reel-v-gap);--reel-space-media-meta:var(--reel-v-gap);--reel-meta-reserve:9.75rem;--reel-media-size:min(100vw, calc(100dvh - var(--header-h) - var(--reel-space-top) - var(--content-offset-top) - var(--reel-space-media-meta) - var(--reel-space-bottom) - var(--reel-meta-reserve)))}}.reel-frame{min-height:0;width:var(--shell-width);align-items:stretch;gap:var(--reel-space-media-meta,clamp(40px, 7.5dvh, 88px));flex-direction:column;flex:auto;display:flex;position:relative;overflow:visible}.reel-media{width:min(calc(100% - 40px - var(--reel-rail-w,44px)), calc(100dvh - var(--header-h) - var(--reel-space-top,0px) - var(--content-offset-top,0px) - var(--reel-space-media-meta,clamp(40px, 7.5dvh, 88px)) - var(--reel-space-bottom,24px) - var(--reel-meta-reserve,9.5rem)));aspect-ratio:1;isolation:isolate;background:var(--color-surface);border:1px solid var(--color-line-soft);align-self:center;position:relative;overflow:hidden;box-shadow:0 1px 2px #0000000a,0 10px 24px -12px #00000012}.reel-still{object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}.reel [data-about-copy] .reel-still,.about-view [data-about-copy] .reel-still:not(.reel-still-color){filter:grayscale()}.about-view [data-color-reveal=done] .reel-still:not(.reel-still-color){filter:none}.about-view .reel-still-color{filter:none;clip-path:inset(0 100% 0 0);pointer-events:none}.about-view [data-color-reveal=ready] .reel-still-color{animation:1.4s cubic-bezier(.33,0,.2,1) forwards about-color-wipe}.about-view [data-color-reveal=done] .reel-still-color{clip-path:inset(0);animation:none}@keyframes about-color-wipe{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@media (prefers-reduced-motion:reduce){.about-view [data-about-copy] .reel-still:not(.reel-still-color),.about-view [data-color-reveal=pending] .reel-still:not(.reel-still-color),.about-view [data-color-reveal=ready] .reel-still:not(.reel-still-color),.about-view [data-color-reveal=done] .reel-still:not(.reel-still-color){filter:none}.about-view .reel-still-color{animation:none;display:none}}.reel-meta{z-index:3;padding-inline:var(--space-inline);flex:none;display:grid;position:relative}.reel-work-title{letter-spacing:.04em;color:var(--color-ink);margin:0 0 .45em;font-size:clamp(1.05rem,3vw,1.2rem);font-weight:600;line-height:1.35}.reel-work-title:empty{display:none}.reel-summary{letter-spacing:.05em;min-height:3.3em;color:var(--color-ink);margin:0;font-size:clamp(.95rem,2.8vw,1.05rem);font-weight:500;line-height:1.65;position:relative}.reel[data-intro=pending] .reel-frame{opacity:0;transform:translateY(14px)}.reel[data-intro=done] .reel-frame{opacity:1;transition:opacity .4s,transform .5s cubic-bezier(.22,1,.36,1);transform:translateY(0)}.reel[data-intro=pending] .reel-meta{opacity:0;transform:translateY(10px)}.reel[data-intro=done] .reel-meta{opacity:1;transition:opacity .3s .1s,transform .35s cubic-bezier(.22,1,.36,1) .1s;transform:translateY(0)}@media (width>=641px){.reel .reel-frame{flex:0 auto}}@media (width<=640px){.reel .reel-frame{width:100%}.reel .reel-media{width:var(--reel-media-size);border-left:0;border-right:0}.reel .reel-meta{margin-left:calc(var(--space-inline) / 2 + var(--reel-rail-w));box-sizing:border-box;padding-left:14px;padding-right:12px}.reel .reel-work-title{font-size:.95rem;font-weight:600}.reel .reel-summary{color:var(--color-muted);font-size:.875rem;font-weight:400}}.about-view,.work-view{--reel-rail-w:0px;box-sizing:border-box;min-height:100dvh;padding:calc(var(--header-h) + var(--reel-space-top) + var(--content-offset-top)) var(--space-inline) 64px;background:var(--color-surface)}.detail-doc{width:min(100%, var(--shell-width));margin:0 auto}.detail-hero{justify-content:center;display:flex}.detail-hero .reel-media{width:min(100%, calc(100dvh - var(--header-h) - var(--reel-space-top,0px) - var(--content-offset-top,0px) - var(--reel-space-media-meta,clamp(40px, 7.5dvh, 88px)) - var(--reel-space-bottom,24px) - var(--reel-meta-reserve,9.5rem)), 560px);align-self:center}.detail-body{max-width:34rem;margin-top:clamp(28px,4dvh,48px)}.detail-title{letter-spacing:.02em;margin:0 0 .65em;font-size:clamp(1.25rem,2.4vw,1.65rem);font-weight:600;line-height:1.35}.detail-summary{color:var(--color-muted);margin:0;font-size:.95rem;line-height:1.75}.detail-gallery{gap:1rem;margin:2.5rem 0 0;display:grid}.detail-gallery-item{margin:0}.detail-gallery-item img{aspect-ratio:1;object-fit:cover;border:1px solid var(--color-line-soft);width:100%}.detail-back{margin:0 0 .85em;font-size:.875rem}.detail-back a{color:var(--color-muted);letter-spacing:.04em;text-decoration:none}.detail-back a:hover,.detail-back a:focus-visible{text-decoration:underline}.detail-more{margin:1.5em 0 0;font-size:.875rem}.detail-more a{color:var(--color-muted);text-decoration:none}.detail-more a:hover,.detail-more a:focus-visible{text-decoration:underline}.reel-detail-link{margin:1.1em 0 0;font-size:.875rem}.reel-detail-link[hidden]{display:none}.reel-detail-link a{color:var(--color-muted);text-decoration:none}.reel-detail-link a:hover,.reel-detail-link a:focus-visible{text-decoration:underline}.reel-media[data-reel-media-link]{cursor:pointer}.about-view .detail-body[data-meta-reveal=pending],.work-view .detail-body[data-meta-reveal=pending]{opacity:0}.about-view .detail-body[data-meta-reveal=ready],.work-view .detail-body[data-meta-reveal=ready]{opacity:1;transition:opacity .35s}@media (prefers-reduced-motion:reduce){.about-view .detail-body[data-meta-reveal=pending],.about-view .detail-body[data-meta-reveal=ready],.work-view .detail-body[data-meta-reveal=pending],.work-view .detail-body[data-meta-reveal=ready]{opacity:1;transition:none}.reel[data-intro=pending] .reel-frame,.reel[data-intro=done] .reel-frame,.reel[data-intro=pending] .reel-meta,.reel[data-intro=done] .reel-meta{opacity:1;transition:none;transform:none}}::view-transition-group(about-portrait){animation-duration:.52s;animation-timing-function:cubic-bezier(.22,1,.36,1)}::view-transition-old(about-portrait),::view-transition-new(about-portrait){object-fit:cover;mix-blend-mode:normal;filter:grayscale();height:100%;overflow:clip;animation:none!important}::view-transition-group(work-media){animation-duration:.52s;animation-timing-function:cubic-bezier(.22,1,.36,1)}::view-transition-old(work-media),::view-transition-new(work-media){object-fit:cover;mix-blend-mode:normal;height:100%;overflow:clip;animation:none!important}.reel-rail-vt-sink{display:none}@media (width<=640px){.about-view .detail-hero .reel-media,.work-view .detail-hero .reel-media{width:min(100%, var(--reel-media-size,100%));border-left:0;border-right:0}.reel-rail-vt-sink{--reel-rail-w:40px;--reel-media-size:min(100vw, calc(100dvh - var(--header-h) - var(--reel-space-top) - var(--content-offset-top) - var(--reel-space-media-meta) - var(--reel-space-bottom) - var(--reel-meta-reserve)));z-index:20;left:calc(-1 * (var(--reel-rail-w) + var(--space-inline)));top:calc(var(--header-h) + var(--reel-space-top) + var(--content-offset-top) + var(--reel-media-size) + var(--reel-space-media-meta));width:var(--reel-rail-w);height:var(--reel-meta-reserve);opacity:0;pointer-events:none;display:block;position:fixed}::view-transition-group(reel-rail){animation-duration:.48s;animation-timing-function:cubic-bezier(.4,0,.2,1)}::view-transition-old(reel-rail),::view-transition-new(reel-rail){mix-blend-mode:normal;height:100%;overflow:clip;animation:none!important}}@media (width>=641px){.reel-rail,.reel-rail-vt-sink{view-transition-name:none!important}}@media (prefers-reduced-motion:reduce){::view-transition-group(about-portrait),::view-transition-old(about-portrait),::view-transition-new(about-portrait),::view-transition-group(work-media),::view-transition-old(work-media),::view-transition-new(work-media),::view-transition-group(reel-rail),::view-transition-old(reel-rail),::view-transition-new(reel-rail){animation:none!important}.reel-rail,.reel-rail-vt-sink,.reel [data-reel-media],.work-view .reel-media{view-transition-name:none!important}}
