.veil{position:fixed;left:0;right:0;z-index:15;height:var(--veil-height);font-size:var(--hud-size);pointer-events:none}.veil__layer{position:absolute;inset:0}.veil:after{content:"";position:absolute;inset:0}.veil--bottom{bottom:0}.veil--bottom:after{background:linear-gradient(to top,#fffc,#ffffff9e 28%,#ffffff57 58%,#ffffff1f 80%,#fff0)}.veil--bottom .veil__layer:nth-child(1){backdrop-filter:blur(.5px);-webkit-backdrop-filter:blur(.5px);mask-image:linear-gradient(to bottom,transparent 0%,#000 14%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 14%)}.veil--bottom .veil__layer:nth-child(2){backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);mask-image:linear-gradient(to bottom,transparent 10%,#000 28%);-webkit-mask-image:linear-gradient(to bottom,transparent 10%,#000 28%)}.veil--bottom .veil__layer:nth-child(3){backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);mask-image:linear-gradient(to bottom,transparent 24%,#000 42%);-webkit-mask-image:linear-gradient(to bottom,transparent 24%,#000 42%)}.veil--bottom .veil__layer:nth-child(4){backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);mask-image:linear-gradient(to bottom,transparent 38%,#000 56%);-webkit-mask-image:linear-gradient(to bottom,transparent 38%,#000 56%)}.veil--bottom .veil__layer:nth-child(5){backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);mask-image:linear-gradient(to bottom,transparent 52%,#000 72%);-webkit-mask-image:linear-gradient(to bottom,transparent 52%,#000 72%)}.veil--bottom .veil__layer:nth-child(6){backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);mask-image:linear-gradient(to bottom,transparent 68%,#000 88%);-webkit-mask-image:linear-gradient(to bottom,transparent 68%,#000 88%)}.veil--top{top:0}.veil--top:after{background:linear-gradient(to bottom,#fffc,#ffffff9e 28%,#ffffff57 58%,#ffffff1f 80%,#fff0)}.veil--top .veil__layer:nth-child(1){backdrop-filter:blur(calc(.5px * var(--veil-in, 0)));-webkit-backdrop-filter:blur(calc(.5px * var(--veil-in, 0)));mask-image:linear-gradient(to top,transparent 0%,#000 14%);-webkit-mask-image:linear-gradient(to top,transparent 0%,#000 14%)}.veil--top .veil__layer:nth-child(2){backdrop-filter:blur(calc(1px * var(--veil-in, 0)));-webkit-backdrop-filter:blur(calc(1px * var(--veil-in, 0)));mask-image:linear-gradient(to top,transparent 10%,#000 28%);-webkit-mask-image:linear-gradient(to top,transparent 10%,#000 28%)}.veil--top .veil__layer:nth-child(3){backdrop-filter:blur(calc(2px * var(--veil-in, 0)));-webkit-backdrop-filter:blur(calc(2px * var(--veil-in, 0)));mask-image:linear-gradient(to top,transparent 24%,#000 42%);-webkit-mask-image:linear-gradient(to top,transparent 24%,#000 42%)}.veil--top .veil__layer:nth-child(4){backdrop-filter:blur(calc(4px * var(--veil-in, 0)));-webkit-backdrop-filter:blur(calc(4px * var(--veil-in, 0)));mask-image:linear-gradient(to top,transparent 38%,#000 56%);-webkit-mask-image:linear-gradient(to top,transparent 38%,#000 56%)}.veil--top .veil__layer:nth-child(5){backdrop-filter:blur(calc(8px * var(--veil-in, 0)));-webkit-backdrop-filter:blur(calc(8px * var(--veil-in, 0)));mask-image:linear-gradient(to top,transparent 52%,#000 72%);-webkit-mask-image:linear-gradient(to top,transparent 52%,#000 72%)}.veil--top .veil__layer:nth-child(6){backdrop-filter:blur(calc(16px * var(--veil-in, 0)));-webkit-backdrop-filter:blur(calc(16px * var(--veil-in, 0)));mask-image:linear-gradient(to top,transparent 68%,#000 88%);-webkit-mask-image:linear-gradient(to top,transparent 68%,#000 88%)}.veil--top{--veil-in: 0}.veil--edge:after{display:none}body.is-detail-open .veil{opacity:0;transition:opacity var(--motion-quick) var(--ease)}.work{padding:1.354% 1.354% 5em;font-size:var(--hud-size)}.masonry{--columns: 3;--gutter: clamp(10px, 1.2vw, 28px);display:flex;align-items:flex-start;gap:var(--gutter)}.masonry__column{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--gutter)}.masonry__item{display:block;width:100%;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}.masonry__figure{--ratio: 1;margin:0;aspect-ratio:var(--ratio);overflow:hidden}.masonry__figure img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;transition:scale var(--motion-base) var(--ease-out)}.masonry__caption{display:block;margin-top:.375em;font-family:var(--font-serif);font-size:.75em;font-weight:400;line-height:normal;color:var(--ink);text-align:left}@media(hover:hover){.masonry__item:hover .masonry__figure img{scale:1.03}}.masonry__item:focus-visible{outline:2px solid var(--ink);outline-offset:4px}.masonry__item.is-case .masonry__figure{visibility:hidden}html{scrollbar-gutter:stable}body.is-detail-open,body.is-detail-closing{overflow:hidden}@media(max-width:1100px){.masonry{--columns: 2}}@media(max-width:640px){.masonry{--columns: 1}}@media(prefers-reduced-motion:reduce){.masonry__figure img{transition:none}}.detail{position:fixed;inset:0;z-index:30;overflow-y:auto;overscroll-behavior:contain;font-family:var(--font-serif);font-size:calc(var(--hud-size) * .75);font-weight:400;line-height:1.233;color:var(--ink)}.detail[hidden]{display:none}.detail__backdrop{position:fixed;inset:0;background:var(--canvas);opacity:0}.detail__figure{--ratio: 1;position:relative;width:66.46vw;aspect-ratio:var(--ratio);margin:1.354vw 0 1.354vw 1.354vw;transform-origin:top left;will-change:transform}.detail__figure img{display:block;width:100%;height:100%;object-fit:cover}.detail__panel{position:fixed;top:1.354vw;right:1.354vw;width:28.6vw;min-height:65vh;display:flex;flex-direction:column;justify-content:space-between;padding:1.125em 1.29em 1.2em;border-radius:1.4375em;background:#efefefe6;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0}.detail__head{display:flex;gap:1.2em;align-items:flex-start;padding-right:2.4em}.detail__title,.detail__category,.detail__body{margin:0;font:inherit}.detail__title,.detail__category{flex:0 0 8em}.detail__category{white-space:pre-line}.detail__body{max-width:18.5em}.detail__close{position:absolute;top:1em;right:1em;width:1.083em;height:1.083em;padding:0;border:0;border-radius:50%;background:silver;color:#fff;font:inherit;display:grid;place-items:center;cursor:pointer;transition:background-color var(--motion-quick) var(--ease-out)}.detail__close:hover,.detail__close:focus-visible{background:var(--ink);outline:none}.detail__close svg{width:.554em;height:.554em;stroke-width:1}@media(max-width:900px),(orientation:portrait){.detail__figure{width:97.292vw;margin:1.354vw}.detail__panel{position:static;width:auto;min-height:0;gap:1.6em;margin:0 1.354vw 4em}.detail__head{flex-wrap:wrap}}
