.work-hero{position:relative;width:100%;height:100svh;display:flex;justify-content:center;align-items:center;text-align:center;overflow:hidden}.work-hero-footer{position:absolute;bottom:0;left:0;width:100%}.work-hero-footer .container{display:flex;justify-content:space-between;align-items:flex-end}.work-items{position:relative;width:100%;padding-bottom:12rem}.work-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:2rem 0 4rem}.work-filters{display:flex;flex-wrap:wrap;gap:.5rem}.work-filter{padding:.7rem 1rem;border:1px solid var(--fg);border-radius:0;background:transparent;color:var(--fg);font-family:var(--type-3);font-size:.75rem;text-transform:uppercase;cursor:pointer;transition:background-color .2s cubic-bezier(.7,0,.2,1),color .2s cubic-bezier(.7,0,.2,1)}.work-filter:hover,.work-filter.is-active{background-color:var(--fg);color:var(--bg)}.work-filter:focus-visible{outline:2px solid var(--fg);outline-offset:3px}.log-head,.log-row{display:grid;grid-template-columns:6rem minmax(0,1fr) 14rem 7rem 4rem;gap:1.5rem;align-items:center}.log-head{padding-bottom:.75rem}.log-head p{opacity:.5}.log-head p:last-child,.log-year{text-align:right}.mission-log{border-bottom:1px solid var(--fg)}.log-row{position:relative;padding:1.6rem 0;border-top:1px solid var(--fg);color:var(--fg);text-transform:none;overflow:hidden;opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.7,0,.2,1),transform .6s cubic-bezier(.7,0,.2,1)}.log-row.is-in{opacity:1;transform:none}.log-row[hidden]{display:none}.log-fill{position:absolute;inset:0;background-color:var(--fg);transform:scaleY(0);transform-origin:bottom;transition:transform .4s cubic-bezier(.7,0,.2,1)}.log-row>span:not(.log-fill){position:relative;transition:color .3s cubic-bezier(.7,0,.2,1),transform .4s cubic-bezier(.7,0,.2,1)}.log-row:hover .log-fill,.log-row:focus-visible .log-fill{transform:scaleY(1)}.log-row:hover>span,.log-row:focus-visible>span{color:var(--bg)}.log-row:hover .log-title,.log-row:focus-visible .log-title{transform:translate(1rem)}.log-row:focus-visible{outline:none}.log-code,.log-client,.log-cats,.log-year{padding:0}.log-code{padding-left:.5rem}.log-year{padding-right:.5rem}.log-title{font-family:var(--type-1);font-weight:500;font-size:clamp(1.6rem,3.2vw,3.4rem);line-height:.9;letter-spacing:-.04em;text-transform:uppercase}.log-thumb{display:none}.log-preview{position:fixed;top:0;left:0;width:clamp(260px,24vw,420px);aspect-ratio:16 / 9;pointer-events:none;z-index:50;overflow:hidden;background-color:#000;visibility:hidden}.log-preview img,.log-preview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.log-preview video{opacity:0;transition:opacity .2s linear}.log-preview.is-playing video{opacity:1}.log-preview-tag{position:absolute;top:.6rem;left:.6rem;padding:.3rem .5rem;background-color:#000;color:var(--bg);font-family:var(--type-3);font-size:.7rem;text-transform:uppercase}@media(max-width:1200px){.log-head,.log-row{grid-template-columns:5rem minmax(0,1fr) 10rem 4rem}.log-head p:nth-child(4),.log-cats{display:none}}@media(max-width:1000px){.work-hero-footer{display:none}.work-hero h1{width:calc(100% - 4rem);margin:0 auto}.work-bar{flex-direction:column;align-items:flex-start;padding-bottom:2rem}.log-head{display:none}.log-row{grid-template-columns:1fr auto;grid-template-areas:"thumb thumb" "code year" "title title" "client client";gap:.6rem;padding:1.25rem 0 1.75rem}.log-thumb{grid-area:thumb;display:block;aspect-ratio:16 / 9;overflow:hidden;background-color:#000}.log-thumb img{width:100%;height:100%;object-fit:cover}.log-code{grid-area:code;padding-left:0}.log-year{grid-area:year;padding-right:0}.log-title{grid-area:title;font-size:1.75rem}.log-client{grid-area:client}.log-cats{display:none}.log-row:hover .log-title{transform:none}}.work-hero{align-items:flex-start;padding-top:24svh}.work-hero h1{position:relative;z-index:1}.work-ship{position:absolute;left:50%;bottom:13svh;width:clamp(200px,21vw,380px);margin-left:calc(clamp(200px,21vw,380px)/-2);z-index:2;pointer-events:none;will-change:transform}.work-ship-img{display:block;width:100%;height:auto}.work-ship-canvas{position:absolute;opacity:.9;pointer-events:none;animation:ship-hover 3.2s ease-in-out infinite}@keyframes ship-hover{50%{transform:translateY(-10px)}}@media(max-width:1000px){.work-hero{padding-top:30svh}.work-ship{width:210px;margin-left:-105px;bottom:14svh}}@media(prefers-reduced-motion:reduce){.work-ship-canvas{animation:none}}@media(max-width:1000px){.log-title{line-height:1.05;letter-spacing:-.02em}}
