body.work-details-open{overflow:hidden}
dialog.work-details{width:min(1000px,94vw);max-width:1000px;max-height:90dvh;padding:0;border:0;background:#191919;color:#eee;overflow:auto;overscroll-behavior:contain;scrollbar-color:#74746e #191919;box-shadow:0 25px 100px #0009;scroll-behavior:smooth}
.work-details::backdrop{background:#080808d9;backdrop-filter:blur(9px);animation:work-backdrop-in .45s ease both}
.work-details.is-opening{animation:work-unfold .65s cubic-bezier(.16,.8,.25,1) both}
.work-details.is-closing{animation:work-fold .24s ease both;pointer-events:none}
.work-details.is-closing::backdrop{animation:work-backdrop-out .24s ease both}
.work-close{position:sticky;float:right;top:13px;right:14px;margin:13px 14px -53px 0;z-index:5;width:39px;height:39px;border:1px dashed #777;background:#222e;color:#eee;font-size:25px;line-height:1;transform:rotate(3deg)}
.work-close:hover{background:#444}.work-details :focus-visible{outline:2px solid #eee;outline-offset:5px}
.work-intro{padding:65px 7% 6px;position:relative}.work-intro .overline{font-size:9px;color:#aaa;margin-bottom:22px}
.work-intro h2{font-size:clamp(36px,5vw,62px);line-height:1.08;letter-spacing:-2.5px;font-weight:400}.work-intro>p:last-of-type{color:#aaa;line-height:1.9;font-size:12px;margin:24px 0 12px}
.work-sewing{display:block;width:100%;height:45px;overflow:visible;margin:20px 0 5px;color:#b4b4ad;stroke-width:1.1}
.work-thread{fill:none;stroke-dasharray:1;stroke-dashoffset:1}.is-opening .work-thread{animation:work-draw 1.4s ease both .2s}
.work-needle{opacity:0}.work-needle path{fill:#d2d2cc;stroke:#777;stroke-width:.5}.work-needle ellipse{fill:#282828;stroke:#999;stroke-width:.5}.is-opening .work-needle{animation:work-sew 1.4s ease both .2s}
.work-story{display:grid;grid-template-columns:1.08fr 1fr;gap:48px;align-items:center;padding:28px 7% 38px}
.work-photo{padding:12px;background:repeating-linear-gradient(91deg,#fff0 0 2px,#0000000b 2px 3px),#c9c9c5;position:relative;transform:rotate(-1.5deg);color:#292929;box-shadow:3px 6px 6px #0004}
.work-photo:after{content:'';position:absolute;inset:5px;border:1px dashed currentColor;pointer-events:none;opacity:.7}.work-photo img{aspect-ratio:4/5;object-fit:cover;background:#ececea}.work-photo figcaption{font-size:8px;letter-spacing:1.5px;padding:14px 5px 4px}
.work-copy .work-index{font-size:8px;letter-spacing:2px;color:#999}.work-copy h3{font-size:clamp(25px,3vw,36px);line-height:1.18;letter-spacing:-1px;margin:20px 0}.work-copy p{color:#b5b5b0;font-size:12px;line-height:1.9;margin:15px 0}
.work-cloth-tag{display:inline-block;padding:16px 20px;margin-top:18px;color:#c6c6bf;background:#303030;outline:1px dashed #888;outline-offset:-5px;transform:rotate(3deg);font-size:8px;line-height:1.8;letter-spacing:2px}
.work-story-reverse{grid-template-columns:1fr 1.08fr}.work-story-reverse .work-photo{grid-column:2;grid-row:1;transform:rotate(1.1deg);background:#3f3f3f;color:#eee}.work-story-reverse .work-copy{grid-column:1;grid-row:1}
.work-process{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:27px;padding:35px 7% 45px}.work-process article{position:relative;padding:3px 0 4px 17px}.work-process article:before{content:'';position:absolute;left:0;top:0;bottom:0;border-left:1px dashed #7b7b75;transform:rotate(-1deg)}.work-process article:nth-child(2):before{transform:rotate(2deg)}.work-process span{font-size:8px;letter-spacing:1.5px;color:#aaa}.work-process h3{font-size:18px;margin:14px 0 12px}.work-process p{color:#aaa;font-size:11px;line-height:1.9}
.work-end{position:relative;background:repeating-linear-gradient(91deg,#ffffff03 0 1px,transparent 1px 4px),#282828;padding:45px 7% 50px;text-align:center;margin:10px 5% 42px;transform:rotate(-.35deg)}.work-end:before{content:'';position:absolute;inset:9px;border:1px dashed #7c7c75;pointer-events:none}.work-end-button{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;border:3px double #aaa;color:#ddd;background:#232323;position:absolute;left:30px;top:-16px;box-shadow:2px 3px 5px #0007}.work-end .overline{font-size:8px;color:#aaa;margin-bottom:16px}.work-end h3{font-size:31px;letter-spacing:-1px;margin:0 0 16px}.work-end>p:not(.overline){font-size:12px;line-height:1.9;color:#bcbcb6}.work-end .button{margin:14px 0 20px;background:#e5e5df;color:#222;border:0;padding:17px 26px}.work-end .button:hover{background:#fff}.work-end small{display:block;font-size:10px;color:#999}
.work-motion .work-story,.work-motion .work-process article,.work-motion .work-end{opacity:0;translate:0 22px;transition:opacity .7s ease,translate .7s cubic-bezier(.18,.8,.3,1)}.work-motion .work-revealed{opacity:1;translate:0 0}.work-process article:nth-child(2){transition-delay:.08s}.work-process article:nth-child(3){transition-delay:.16s}
@keyframes work-unfold{from{opacity:0;transform:translateY(32px) scale(.96) rotate(-1deg);clip-path:inset(0 0 18% 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes work-fold{to{opacity:0;transform:translateY(20px) scale(.98)}}
@keyframes work-backdrop-in{from{opacity:0}to{opacity:1}}@keyframes work-backdrop-out{to{opacity:0}}
@keyframes work-draw{to{stroke-dashoffset:0}}@keyframes work-sew{0%{opacity:0;transform:translate(8px,24px) rotate(-8deg)}8%{opacity:1}48%{transform:translate(280px,22px) rotate(8deg)}92%{opacity:1}100%{opacity:0;transform:translate(590px,18px) rotate(-8deg)}}
@media(max-width:650px){dialog.work-details{width:94vw;max-height:92dvh}.work-intro{padding:58px 8% 0}.work-intro h2{font-size:39px;letter-spacing:-1.5px}.work-story,.work-story-reverse{grid-template-columns:1fr;gap:30px;padding:25px 8% 30px}.work-story-reverse .work-photo,.work-story-reverse .work-copy{grid-column:auto;grid-row:auto}.work-photo img{aspect-ratio:1}.work-copy h3{font-size:30px}.work-process{grid-template-columns:1fr;gap:23px;padding:20px 8% 30px}.work-end{padding:40px 8% 34px;margin:15px 6% 30px}.work-end h3{font-size:27px}.work-end .button{width:100%;font-size:11px;padding:16px 19px;gap:10px}.work-cloth-tag{margin-top:8px}.work-close{top:10px}}
@media(prefers-reduced-motion:reduce){.work-details,.work-details::backdrop{animation:none!important;scroll-behavior:auto}.work-thread{stroke-dashoffset:0}.work-needle{display:none}.work-motion .work-story,.work-motion .work-process article,.work-motion .work-end{opacity:1;translate:none;transition:none}}