.project-detail{--project-info-width:calc(100vw / 3);grid-template-columns:var(--project-info-width) minmax(0, 2fr);background:#efefef;min-height:100dvh;display:grid;position:relative}.project-detail__info{color:#000;width:100%;height:100dvh;min-height:0;font-family:var(--font);flex-direction:column;justify-content:space-between;align-self:start;padding:48px 16px 43px;font-size:12px;line-height:24px;display:flex;position:sticky;top:0;overflow:hidden}.project-detail__label,.project-detail__meta dt{color:#aaa;text-transform:uppercase;margin:0;font-size:12px;font-weight:400;line-height:24px}.project-detail__copy+.project-detail__copy{margin-top:20px}.project-detail__copy>p:last-child{white-space:pre-line;margin:6px 0 0}.project-detail__meta{gap:10px;margin:0;padding-top:20px;display:grid}.project-detail__meta div{grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.project-detail__meta dt,.project-detail__meta dd{margin:0;font-size:12px;font-weight:400;line-height:24px}.project-detail__meta dt{color:#aaa;grid-column:1}.project-detail__meta dd{color:#000;overflow-wrap:anywhere;text-align:left;text-transform:uppercase;grid-column:2/span 3;min-width:0}.project-detail__live-link{color:inherit;text-decoration:none}@media (hover:hover){.project-detail__live-link:hover{text-underline-offset:2px;text-decoration:underline}}.project-detail__media{background:#efefef;padding:4px 4px 48px}.project-detail__media-row{grid-template-columns:repeat(var(--media-columns), minmax(0, 1fr));gap:4px;margin-bottom:4px;display:grid}.project-detail__content-block{min-width:0}.project-detail__content-block>img,.project-detail__content-block>video{object-fit:cover;border-radius:3px;width:100%;display:block}.project-detail__content-block--text p{color:#000;font-family:var(--font);white-space:pre-line;margin:0;padding:0 12px;font-size:12px;font-weight:400;line-height:24px}.project-detail__animation{aspect-ratio:1;border-radius:3px;width:100%;overflow:hidden}.project-detail__animation canvas,.project-detail__animation svg{display:block;width:100%!important;height:100%!important}.project-directory{z-index:70;width:var(--project-info-width);min-height:100dvh;font-family:var(--font);padding:12px;font-size:13px;line-height:24px;position:fixed;top:0;left:0}.project-directory:before{content:"";z-index:68;pointer-events:none;background:#efefef;height:48px;position:absolute;top:0;left:0;right:0}.project-directory__backdrop{z-index:69;backdrop-filter:blur();background:#efefef00;transition:backdrop-filter .56s cubic-bezier(.22,1,.36,1);position:absolute;inset:0}.project-directory.is-expanded .project-directory__backdrop,.project-directory.is-hovered .project-directory__backdrop,.project-directory:focus-within .project-directory__backdrop{backdrop-filter:blur(18px);background:#efefef}.project-directory__bar{z-index:70;color:#aaa;user-select:none;text-transform:uppercase;align-items:flex-start;margin-left:0;display:flex;position:relative}.project-directory__works,.project-directory__link{color:#fff;margin-block:3.5px;padding:2px 4px;line-height:1}.project-directory__link{justify-self:start}.project-directory__works{color:#fff;text-transform:none}.project-directory__separator{color:#aaa;padding:0 4px}.project-directory__current{color:#fff;cursor:pointer;max-width:28ch;font:inherit;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;background:0 0;border:0;margin-block:3.5px;padding:2px 4px;line-height:1;overflow:hidden}.project-directory__project-group{min-width:0}.project-directory__list{opacity:0;pointer-events:none;width:fit-content;max-width:100%;margin:0;transition:opacity .26s,transform .42s cubic-bezier(.22,1,.36,1);display:grid;transform:translateY(-6px)}.project-directory.is-expanded .project-directory__list,.project-directory.is-hovered .project-directory__list,.project-directory:focus-within .project-directory__list{opacity:1;pointer-events:auto;transform:translateY(0)}.project-directory__preview{z-index:71;aspect-ratio:4/3;opacity:0;pointer-events:none;width:min(300px,42vw);transform:translate3d(var(--preview-x,-999px), var(--preview-y,-999px), 0) scale(.96);transition:opacity .17s,transform .25s cubic-bezier(.22,1,.36,1);position:fixed;top:0;left:0;overflow:hidden}.project-directory__preview.is-visible{opacity:1;transform:translate3d(var(--preview-x), var(--preview-y), 0) scale(1)}.project-directory__preview img{object-fit:cover;width:100%;height:100%}.project-detail__close{z-index:80;position:fixed;top:15.5px;right:12px}.project-detail__top{z-index:80;cursor:pointer;opacity:0;pointer-events:none;text-transform:uppercase;visibility:hidden;background:0 0;border:0;align-items:center;gap:4px;transition:opacity .56s cubic-bezier(.22,1,.36,1),transform .56s cubic-bezier(.22,1,.36,1);display:inline-flex;position:fixed;bottom:12px;right:12px;transform:translateY(4px)}.project-detail__top.is-visible{opacity:1;pointer-events:auto;visibility:visible;transform:translateY(0)}.project-detail__top-icon{background:currentColor;flex:0 0 12px;width:12px;height:12px;mask:url(/icons/project-top.svg) 50%/contain no-repeat}.project-detail__footer{z-index:5;padding:0 12px 12px;position:fixed;bottom:0;left:0}@media (width<=760px){.project-detail{--project-info-width:min(100%, 390px);display:block}.project-detail:before{content:"";z-index:65;pointer-events:none;background:#efefef;height:48px;position:fixed;top:0;left:0;right:0}.project-detail__info{height:auto;min-height:auto;padding:48px 16px 43px;position:static;overflow:visible}.project-directory{width:100vw;height:100dvh;padding:12px;font-size:13px;line-height:24px}.project-directory__project-group{width:max-content;max-width:calc(100vw - 110px)}.project-directory__list{width:100%;margin-top:6px;margin-left:0}.project-directory__link{background:0 0;border-radius:0;align-items:center;width:100%;min-height:40px;margin-block:0;padding:0;display:flex}.project-directory__link-label{border-radius:3px;padding:2px 4px;line-height:1;display:inline-block}.project-directory__link[aria-current=page] .project-directory__link-label,.project-directory__link:focus-visible .project-directory__link-label{background:#fff}.project-directory__link[aria-current=page],.project-directory__link:focus-visible{background:0 0}@media (hover:hover){.project-directory__link:hover{background:0 0}.project-directory__link:hover .project-directory__link-label{background:#fff}}.project-detail__footer{background:0 0;padding:0 12px 12px;display:block;position:static}}@media (prefers-reduced-motion:reduce){.project-directory__backdrop,.project-directory__list,.project-directory__preview,.project-detail__top{transition:none}}