/* Sketch-to-built motion: in-place card builds + making-of rows (standalone, with fallbacks) */
.build{position:relative;overflow:hidden;background-color:#ece9e3;background-image:linear-gradient(rgba(96,128,160,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(96,128,160,.09) 1px,transparent 1px);background-size:24px 24px;--d:0s}
.build img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;transform:none!important}
.build .b-line,.build .b-pencil,.build .b-shade{-webkit-mask-image:linear-gradient(90deg,#000 44%,transparent 56%);mask-image:linear-gradient(90deg,#000 44%,transparent 56%);-webkit-mask-size:230% 100%;mask-size:230% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0}
.build .b-line{animation:bl 9.5s cubic-bezier(.45,.05,.25,1) infinite}
.build .b-pencil{animation:bp 9.5s cubic-bezier(.45,.05,.25,1) infinite}
.build .b-shade{animation:bs 9.5s cubic-bezier(.45,.05,.25,1) infinite}
.build .b-final{animation:bf 9.5s ease-in-out infinite}
.build img{animation-delay:var(--d)!important;animation-play-state:paused!important}
.build.run img{animation-play-state:running!important}
.build .b-tag{position:absolute;left:12px;bottom:12px;z-index:3;font:500 12px/1 -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif;color:#f3f1ec;background:rgba(29,30,32,.62);padding:6px 10px;border-radius:999px;pointer-events:none}
@keyframes bl{0%{-webkit-mask-position:100% 0;mask-position:100% 0;opacity:1}12%,86%{-webkit-mask-position:0 0;mask-position:0 0;opacity:1}94%,100%{-webkit-mask-position:0 0;mask-position:0 0;opacity:0}}
@keyframes bp{0%,12%{-webkit-mask-position:100% 0;mask-position:100% 0;opacity:1}25%,86%{-webkit-mask-position:0 0;mask-position:0 0;opacity:1}94%,100%{-webkit-mask-position:0 0;mask-position:0 0;opacity:0}}
@keyframes bs{0%,25%{-webkit-mask-position:100% 0;mask-position:100% 0;opacity:1}38%,86%{-webkit-mask-position:0 0;mask-position:0 0;opacity:1}94%,100%{-webkit-mask-position:0 0;mask-position:0 0;opacity:0}}
@keyframes bf{0%,38%{opacity:0}52%,86%{opacity:1}94%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.build img{animation:none!important}.build .b-final{opacity:1}}

.making{padding-top:clamp(40px,5vw,80px);padding-bottom:clamp(30px,4vw,60px)}
.making-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,50px)}
.making-head h2{font-size:clamp(30px,3vw,48px);line-height:1.08;font-weight:600;letter-spacing:-.028em}
.making-head p{color:var(--mute,#6d6860);max-width:58ch;line-height:1.7;margin-top:12px;font-size:17px}
.allphotos{display:inline-flex;align-items:center;gap:12px;background:#1d1e20;color:#f3f1ec;padding:15px 22px;text-decoration:none;font-size:15px;font-weight:500;white-space:nowrap}
.seq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);column-gap:14px;row-gap:12px;margin-bottom:clamp(44px,5vw,76px);--d:0s}
.seq:nth-of-type(even){grid-template-columns:minmax(0,3fr) minmax(0,1fr)}
.seq:nth-of-type(even) .studies{order:2}
.studies{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:14px}
.study{position:relative;overflow:hidden;margin:0;background-color:#ece9e3;background-image:linear-gradient(rgba(96,128,160,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(96,128,160,.09) 1px,transparent 1px);background-size:24px 24px}
.study img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.study .draw{-webkit-mask-image:linear-gradient(90deg,#000 44%,transparent 56%);mask-image:linear-gradient(90deg,#000 44%,transparent 56%);-webkit-mask-size:230% 100%;mask-size:230% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0;animation:mk1 10s cubic-bezier(.45,.05,.25,1) infinite;animation-delay:var(--d);animation-play-state:paused}
.study:nth-child(2) .draw{animation-name:mk2}.study:nth-child(3) .draw{animation-name:mk3}
.seq.run .draw{animation-play-state:running}
.study figcaption,.final .tag{position:absolute;left:10px;bottom:9px;font-size:12px;font-weight:500;color:#44474b;background:rgba(243,241,236,.9);padding:3px 9px;border-radius:999px}
.final{position:relative;margin:0;overflow:hidden;background:#e7e3dc}
.final button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.final img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.final .tag{left:14px;bottom:14px;background:rgba(29,30,32,.72);color:#f3f1ec}
.seqcap{order:3;grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;font-size:15px;line-height:1.5;color:#46443f}
.seqcap span{opacity:.7;white-space:nowrap}
.dark .seqcap{color:#d9d4cc}.dark .making-head p{color:#bdb8b0}.dark .allphotos{background:#f3f1ec;color:#23272b}
@keyframes mk1{0%{-webkit-mask-position:100% 0;mask-position:100% 0;opacity:1}15%{-webkit-mask-position:0 0;mask-position:0 0}84%{opacity:1;-webkit-mask-position:0 0;mask-position:0 0}94%,100%{opacity:0;-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes mk2{0%,15%{-webkit-mask-position:100% 0;mask-position:100% 0;opacity:1}31%{-webkit-mask-position:0 0;mask-position:0 0}84%{opacity:1;-webkit-mask-position:0 0;mask-position:0 0}94%,100%{opacity:0;-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes mk3{0%,31%{-webkit-mask-position:100% 0;mask-position:100% 0;opacity:1}47%{-webkit-mask-position:0 0;mask-position:0 0}84%{opacity:1;-webkit-mask-position:0 0;mask-position:0 0}94%,100%{opacity:0;-webkit-mask-position:0 0;mask-position:0 0}}
@media(max-width:760px){.seq,.seq:nth-of-type(even){grid-template-columns:1fr}.seq:nth-of-type(even) .studies{order:0}.studies{grid-template-rows:none;grid-template-columns:repeat(3,1fr)}.study{aspect-ratio:4/3}.seqcap{flex-direction:column;gap:2px}}
@media (prefers-reduced-motion:reduce){.study .draw{animation:none;-webkit-mask-image:none;mask-image:none}}