@layer components{.work-detail{--work-detail-line:#d6d6d6;--work-detail-muted:#c4c4c4}.work-detail-hero{--work-detail-hero-space:1.6rem;padding-top:24svh;padding-bottom:12vw;overflow-x:clip}.work-detail-hero-top{padding-bottom:var(--work-detail-hero-space);justify-content:space-between;align-items:flex-end;gap:1.6rem;display:flex;position:relative}.work-detail-hero-rule{background:var(--work-detail-line);height:1px;position:absolute;bottom:0;left:0;right:0}.work-detail-hero-client{text-transform:uppercase}.work-detail-hero-meta,.work-detail-hero-year{font-family:var(--font-sans);text-transform:uppercase;font-size:1.3rem;font-weight:600}.work-detail-hero-bottom{flex-direction:column;gap:1.8rem;display:flex}.work-detail-hero-title{padding-top:var(--work-detail-hero-space);color:#bfbfbf;text-align:right;text-transform:uppercase}.work-detail-hero-inner[data-entrance=pending] [data-hero-enter-wave]{opacity:0}.work-detail-hero-inner[data-entrance=pending] .work-detail-hero-rule{transform:scaleX(0)}@media (min-width:768px){.work-detail-hero{--work-detail-hero-space:3.2rem;padding-top:min(24.3vw,36.6vh,350px);padding-bottom:min(5.2vw,75px)}.work-detail-hero-meta,.work-detail-hero-year{font-size:clamp(1.3rem,1.05vw,1.6rem)}.work-detail-hero-meta{align-self:center}.work-detail-hero-bottom{flex-direction:row;justify-content:space-between;align-items:center}}@media (prefers-reduced-motion:reduce){.work-detail-hero-inner[data-entrance=pending] [data-hero-enter-wave]{opacity:1}.work-detail-hero-inner[data-entrance=pending] .work-detail-hero-rule{transform:none}}.work-detail-film-frame{aspect-ratio:4/5;background:#0d0d0d;position:relative;overflow:hidden}.work-detail-film-media{position:absolute;inset:-6% 0}.work-detail-film-zoom{will-change:transform;position:absolute;inset:0}.work-detail-film-scale{transition:opacity .4s var(--ease-soft-out);position:absolute;inset:0}.work-detail-film-bubble{z-index:3;pointer-events:none;will-change:transform;width:11.2rem;height:11.2rem;position:absolute;top:0;left:0}.work-detail-film-bubble-button{border-radius:50%;width:100%;height:100%;display:block}.work-detail-film-bubble-inner{background:var(--color-white-100);width:100%;height:100%;font-family:var(--font-sans);text-transform:uppercase;letter-spacing:-.005em;color:var(--color-white-100);white-space:nowrap;border-radius:50%;place-items:center;font-size:1.3rem;font-weight:600;display:grid;transform:scale(0)}.work-detail-film-bubble,.work-detail-film-bubble-label{mix-blend-mode:difference}.work-detail-film-hit{--side-w:var(--work-detail-film-controls-side-width,0px);--side-h:var(--work-detail-film-controls-side-height,0px);inset:var(--work-detail-film-controls-top-height,0) 0 var(--work-detail-film-controls-height) 0;z-index:2;clip-path:polygon(0 0, calc(100% - var(--side-w)) 0, calc(100% - var(--side-w)) var(--side-h), 100% var(--side-h), 100% 100%, 0 100%);position:absolute}@media (hover:hover){.work-detail-film-hit{cursor:none}}.work-detail-film-frame.is-playing{cursor:auto}.work-detail-film-frame.is-playing .work-detail-film-media{inset:0}@media (min-width:768px){.work-detail-film-frame{aspect-ratio:16/9;width:100%;max-height:calc(100vh + 2px)}.work-detail-film-bubble{width:13.2rem;height:13.2rem}}@media (min-width:768px) and (max-width:1024px){.work-detail-film-frame.is-playing{clip-path:none!important}.work-detail-film-frame.is-playing .work-detail-film-zoom{transform:none!important}}@media (hover:hover) and (min-width:768px){.work-detail-film-frame:not(.is-playing){cursor:none}}[data-work-detail-reveal=pending]{opacity:0}.work-detail-section-head{justify-content:space-between;align-items:flex-end;padding-bottom:2.4rem;display:flex;position:relative}.work-detail-section-head-title{text-transform:uppercase}.work-detail-section-rule{transform-origin:0;background:#8a8a8a;height:1px;position:absolute;bottom:0;left:0;right:0}[data-work-detail-reveal=pending] .work-detail-section-rule{transform:scaleX(0)}.work-detail-overview{padding-top:16vw;padding-bottom:18vw}.work-detail-statement{text-transform:uppercase;text-indent:18%;margin-top:12vw}.work-detail-statement-word{opacity:.14}.work-detail-body{font-family:var(--font-body);text-transform:uppercase;text-indent:24%;margin-top:16vw;font-size:1.5rem;font-weight:500;line-height:1.32}.work-detail-grid-section{padding-bottom:18vw}.work-detail-grid{grid-template-columns:1fr;gap:.8rem;display:grid}.work-detail-grid-item{aspect-ratio:4/5;background:#eee;border-radius:3px;position:relative;overflow:hidden}.work-detail-grid-item--wide{aspect-ratio:16/9}.work-detail-grid-image{will-change:transform;width:100%;height:124%;position:absolute;top:-12%;left:0}.work-detail-next{padding-top:20rem;padding-bottom:15rem;overflow-x:clip}.work-detail-next.work-detail-next--flush-top{padding-top:0}.work-detail-next-mobile{background:var(--color-background);isolation:isolate;place-items:center;min-height:7.3rem;display:grid;position:relative}.work-detail-next-mobile-media{pointer-events:none;display:block;position:absolute;inset:0}.work-detail-next-mobile-thumb{clip-path:inset(100% 0 0);width:14.6rem;height:7.3rem;transition:clip-path .6s var(--ease-soft-in);position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}.work-detail-next-mobile-thumb.is-visible{clip-path:inset(0);transition:clip-path .9s var(--ease-expo-out)}@media (prefers-reduced-motion:reduce){.work-detail-next-mobile-thumb{transition:none}}.work-detail-next-mobile-name{white-space:nowrap;text-align:center;text-box:trim-both cap alphabetic;text-transform:uppercase;color:var(--color-white-100);mix-blend-mode:difference;position:relative}.work-detail-next [data-entrance=pending] .project-list-row{opacity:0}.work-detail-next-label{color:var(--work-detail-muted);text-align:center;text-transform:uppercase;margin-bottom:4vw}@media (min-width:768px){.work-detail-overview{padding-top:8.8rem;padding-bottom:28.8rem}.work-detail-statement{text-indent:25.4%;margin-top:11.1rem}.work-detail-body{text-indent:23%;margin:17.5rem 0 0 42.18%;font-size:min(1.625vw,23.4px);line-height:1.37}.work-detail-grid-section{padding-bottom:min(9vw,130px)}.work-detail-grid{grid-template-columns:1fr 1fr;gap:1.6rem}.work-detail-grid-item{aspect-ratio:662/720}.work-detail-grid-item--wide{aspect-ratio:1342/735;grid-column:1/-1}.work-detail-next{padding-top:30rem;padding-bottom:30rem}.work-detail-next-label{margin-bottom:min(1vw,14px)}}@media (prefers-reduced-motion:reduce){[data-work-detail-reveal=pending]{opacity:1}[data-work-detail-reveal=pending] .work-detail-section-rule{transform:none}.work-detail-statement-word,.work-detail-next [data-entrance=pending] .project-list-row{opacity:1}}@media (min-width:768px){.work-detail-hero-mobile-only{display:none}}@media (max-width:767px){.work-detail-hero-desktop-only{display:none}.work-detail-hero{padding-top:26.5rem;padding-bottom:3rem}.work-detail-hero-top{padding-inline:1px}.work-detail-hero-rule{background:var(--color-black-25)}.work-detail-hero-bottom{gap:0;margin-top:0}.work-detail-hero-bottom .work-detail-hero-rule{display:block;position:static}.work-detail-hero-title{padding-bottom:var(--work-detail-hero-space);letter-spacing:-.04em;font-size:3.2rem;line-height:4rem}.work-detail-hero-meta-row{gap:.8rem;margin-top:2.5rem;display:flex}.work-detail-hero-meta-row .work-detail-hero-year,.work-detail-hero-meta-row .work-detail-hero-meta{letter-spacing:-.04em;text-transform:none;font-weight:700;line-height:1.6rem}.work-detail-hero-meta-row .work-detail-hero-meta{text-transform:uppercase}.work-detail-hero-meta-row .work-detail-hero-year{width:8rem;font-size:1.4rem}.work-detail-hero-meta-row .work-detail-hero-meta{font-size:1.6rem}.work-detail-film-frame{aspect-ratio:393/664}.work-detail-film-bubble{width:12rem;height:12rem}.work-detail-film-bubble-inner{letter-spacing:-.04em;white-space:normal;font-size:1.6rem;font-weight:700;line-height:1.6rem}.work-detail-film-bubble-label{text-align:center;width:6.4rem;display:block}.work-detail-overview{padding-top:8.6rem;padding-bottom:7rem}.work-detail-overview .work-detail-section-head{display:none}.work-detail-statement{letter-spacing:-.04em;text-indent:0;margin-top:0;font-size:4rem;font-weight:700;line-height:4.8rem}.work-detail-body{text-indent:0;margin-top:6.6rem;font-size:1.8rem;font-weight:600;line-height:2.4rem}.work-detail-grid-section{padding-bottom:11.2rem}.work-detail-grid{grid-template-columns:1fr 1fr;gap:.8rem}.work-detail-grid-item{aspect-ratio:169/200;border-radius:4px}.work-detail-grid-item--wide{aspect-ratio:345/200;grid-column:1/-1}.work-detail-next{padding-top:11.2rem;padding-bottom:20rem}.work-detail-next-label{color:var(--color-black-25);margin-bottom:0}}}
